Shufoo!embed로 PDF 전단지 표시

17337 단어 HTML JavaScript embed Shufoo

슈퍼마켓의 전단지를 비교 연구하기 위해서, 나는 HTML로 부근의 전단지를 한 줄로 배열하고 싶다

URL을 고정하는 이미지 전단지는img의 직접 링크

텍스트(HTML) 형식의 특판 정보는 iframe

하지만 자동 업데이트 Shufoo! 전단지는 어떡하지.

이런 거.
디지털 전단지는 Flash로 만들어져 이미 계속 알아볼 수 없기 때문에 매번 (있다면) PDF 전단지를 보지만 이것을 클릭할 때마다 귀찮고 자체 제작한 HTML에 어떻게 편입해야 할지 모르겠다.
그래서 코드를 읽고 방법을 생각해 봤어요.

Shoofoo 전단지 생성

Shofoo 사이트에서 정보를 찾을 수 없기 때문에 간단한 마트 사이트에서 보면 소스가 이런 느낌이에요.

    <script charset="Shift_JIS" src="http://asp.shufoo.net/t/asp_client/src/js/asp_chirashi_list.js" ></script>
    <div style="width:190px">
    <script>
    SHUFOO.ASP.PC.AUTO.create({number:1, direction: "horizontal", shopId:整数値, un:"スーパー名", 'callback':{nohit:function(){}, 'error':function(){}});
    </script>
    </div>

이것SHUFOO.ASP.PC.AUTO.create은 아마도 그 전단지 덩어리가 될 것이다.
JSON에서 정보 교환

JSONCallbackJscript2IdShufoohogehoge({
  "shop": {
    "shopId": "hogehoge",
    "shopName": "hogehoge",
    "shopNameRead": "hogehoge",
    "zipcode": "hogehoge",
    "prefectureName": "hogehoge",
    "address1": "hogehoge",
    "address2": "hogehoge",
    "address3": "",
    "tel": "hogehoge",
    "businessHour": "hogehoge",
    "logoUrl": "",
    "hpUrl": "http://hogehoge",
    "mapUrl": "",
    "mapLatitude": "hogehoge",
    "mapLongitude": "hogehoge",
    "takuhaibinUrl": "",
    "chirashis": {
      "chirashi": [      
        {
          "id": "hogehoge",
          "title": "12/10～12/13hogehoge",
          "subTitle": "",
          "iconUrl": "http://ipqcache2.shufoo.net/c/hogehoge",
          "pdfUrl": "http://asp.shufoo.net/api/aspViewerRedirect.php?shopId=hogehoge",
          "imgUrl": "",
          "contentsXML": "http://ipqcache2.shufoo.net/c/2019/12/09/c/hogehoge",
          "flashUrl": "http://asp.shufoo.net/api/aspViewerRedirect.php?shopId=hogehoge",
          "flashUrlType": "1",
          "publishStartTime": "2019/12/09 20:00:00",
          "publishEndTime": "2019/12/13 20:59:59",
          "insertTime": "2019/12/09 17:27:16",
          "updateTime": "2019/12/09 17:27:41",
          "timeShowPermit": "0"
        }

      ]
    }
  }
});

너는 이런 정보를 얻을 수 있다.
JSON의 URL을 얻을 수 있다는 것을 알았기 때문에 바로 두드릴 수 있다
무슨 일이 있는 것을 좋아하지 않기 때문에create의 리셋으로 처리합니다.
리턴 웨이브
http://asp.shufoo.net/t/asp_client/src/js/asp_chirashi_list.js
열심히 찾아보면 몇 개 있을 것 같지만complete를 사용하기로 했어요.
매개 변수에 앞의 json이 있기 때문에 표시할 수 있습니다 pdfUrl.

PDF 포함

그러면 HTML에서 다른 요소와 pdf를 동시에 열람할 수 있는지 조사했을 때
HTML 레이블에만 포함된 PDF 표시 방법 - Qiita
embed를 사용하는 방법이 재미있을 것 같아서 이렇게 했습니다.
원 보도에서 종횡으로 표시하다
embed: 포함된 외부 컨텐츠 요소 - HTML: HyperText 태그 언어
등등
height
이 리소스의 높이는 CSS 픽셀 값으로 표시됩니다.절대값이어야 합니다.백분율 값을 사용할 수 없습니다.
% 와 (는) 안 된다고 쓰여 있습니다.
이동을 시도하면 Firefox 환경에서
왜냐하면width만 왠지% 가 작용하는 것 같아요.

<embed src="" type="application/pdf" width="100%" height="1900">

그 결과 PDF 뷰어에서 확대 축소되어 모니터의 높이를 확보했습니다.

지금 이런 느낌이에요.

<body style="width: 100%;height: 100%;">
<img src="URL固定のチラシ画像"  style="width: 100%;height: 100%;">
<embed src="" type="application/pdf" width="100%" height="1900">
<iframe src="テキストベースの情報" width="100%" height="1900">
</iframe>

    <script charset="Shift_JIS" src="http://asp.shufoo.net/t/asp_client/src/js/asp_chirashi_list.js" ></script>
    <div style="width:190px">
    <script>
    SHUFOO.ASP.PC.AUTO.create({number:1, direction: "horizontal", shopId:hoge, un:"hoge", 'callback':{nohit:function(){}, 'error':function(){}
        ,'complete': function(e) {
            document.querySelector('embed').src = e.target._data.chirashis.chirashi[0].pdfUrl
        }
    }});
    </script>
    </div>
</body>

이렇게 세 개의 슈퍼마켓의 정보를 가득 배열하다.
꿈으로서 전단지에서 정보를 정규화하고 표현하면 비교 연구도 수월해지지만 지면 디자인의 자유분방함을 보면 구글 등의 문자가 일으키는 현상은 좋지 않아 기계학습에서 모호한 사람들이 나오기를 바란다.

참고 자료

<!--
    body要素内に記述してください
    shopIdとunはこのままコピーしても動作しません
-->
        <!--div style="border:1px solid #ccc;width:190px;height:200px;">
            <script>
                SHUFOO.ASP.PC.AUTO.create({
                     number:1       //表示件数:1（半角数字、最大3）
                    ,direction:"vertical"   //垂直方向　:　vertical　（半角ダブルコーテーション【"】で囲む）
                    ,shopId:257725      //半角数字
                    ,un:"ohkawa"    //半角英数（半角ダブルコーテーション【"】で囲む）
                });
            </script-->
        </p></div>
        <div style="border:1px solid #ccc;width:190px;height:200px;">
            <script>
                SHUFOO.ASP.PC.AUTO.create({
                     number:1       //表示件数:1（半角数字、最大3）
                    ,direction:"vertical"   //垂直方向　:　vertical　（半角ダブルコーテーション【"】で囲む）
                    ,shopId:257725      //半角数字
                    ,un:"ohkawa"    //半角英数（半角ダブルコーテーション【"】で囲む）
                });
            </script>
        </div>

Reference

이 문제에 관하여(Shufoo!embed로 PDF 전단지 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/khsk/items/9cc8309e8b5e98f58969

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

jQuery UI를 사용하여 대화 상자 표시

세그먼트/패턴/체형 태그 정보

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다