2016-07-20 2 views
4

FB 인스턴트 기사에 내 자신의 스크립트 (iframe에 내용이 포함되어 있음)를 삽입하려고합니다.Facebook 인스턴트 Article custom embed가 요청을하지 않습니다.

일부 기기에서만 제대로 작동하는 것 같습니다 (예 : iPhone 5s & 6s, LG G2). 다른 기기 (삼성 기기)는 아무 것도로드하지 않는 것 같습니다.

분명히 문제는 스크립트의 src에 대한 실제 요청을하는 것입니다. 그러나 그것은 단지 가정입니다. (데모 용으로 src를 angular로 변경했습니다). 나는했습니다

페이스 북은 여기에 제안 도구를 사용하여이 디버깅하려고 : 당신이 문서 편집기에 붙여 넣으면 Link

이 내 페이지의 예를 추가했습니다 (단지 참조를 위해, 그것은 경고를 발생합니다).

참고 : 내 코드가 일부 원본의 요청없이 직접 스크립트 태그에 삽입되면 예상대로 실행됩니다.

무엇이 잘못 되었나요? FB Instant Articles에서 내 스크립트를 호출하지 않는 이유는 무엇입니까?

<!doctype html><html><head><link rel="canonical" href="http://news.mywebsite.com/some-canonical-url/"/><meta charset="utf-8"/><meta property="op:generator" content="facebook-instant-articles-sdk-php"/><meta property="op:generator:version" content="1.3.0"/><meta property="op:generator:application" content="facebook-instant-articles-wp"/><meta property="op:generator:application:version" content="2.11"/><meta property="op:generator:transformer" content="facebook-instant-articles-sdk-php"/><meta property="op:generator:transformer:version" content="1.3.0"/><meta property="op:markup_version" content="v1.0"/><meta property="fb:article_style" content="default"/></head><body><article><header><figure><img src="https://www.google.co.il/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/></figure><h1>js embed TEST!!!!</h1><time class="op-published" datetime="2016-06-24T13:50:14+00:00">June 24th, 1:50pm</time><time class="op-modified" datetime="2016-07-18T16:21:25+00:00">July 18th, 4:21pm</time><address><a>dev guy</a></address><h3 class="op-kicker">test kicker</h3></header><p><b>Nthi is a TEST</b></p> 
 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker <a href="http://www.lipsum.com/">including versions of Lorem Ipsum.</a>)</p> 
 
<h2>vine</h2> 
 
<figure class="op-interactive"> 
 
    <iframe src="https://vine.co/v/Ot2mpV1YO6F/embed/simple" width="600" height="600"></iframe> 
 
</figure> 
 
<h2>script tag with src</h2> 
 
<figure class="op-interactive"> 
 
\t <iframe class="no-margin"> 
 
      <div class="wrapper" id="111"> 
 
      \t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script> 
 
      </div>  
 
\t </iframe> 
 
</figure> 
 

 
<h2>script taht injects a script tag</h2> 
 
<figure class="op-interactive"> 
 
\t <iframe> 
 
<div class="wrapper" id="222"> 
 
    <script src="http://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de"></script> 
 
    <script> 
 
    // get parent div 
 
    var scriptTag = document.getElementsByTagName('script'); 
 
     scriptTag = scriptTag[scriptTag.length - 1]; 
 
    var parentNode = scriptTag.parentNode; 
 
    var s = document.createElement("script"); 
 
s.type = "text/javascript"; 
 
s.src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"; 
 
    parentNode.appendChild(s); 
 
    </script> 
 
</div> 
 
\t </iframe> 
 
</figure> 
 

 
<h2>script using get req. and eval's response</h2> 
 
<figure class="op-interactive"> 
 
\t <iframe> 
 
<div class="wrapper" id="333"> 
 
    <script src="http://jsconsole.com/js/remote.js?6f3e6a5a-5408-4419-8331-7a4b76f5b8bb"></script> 
 
    <script>var xmlHttp = new XMLHttpRequest(); 
 
window.stat = 2; 
 
    xmlHttp.onreadystatechange = function(state) { 
 
    window.stat = 3; 
 
    window.xmlHttp = xmlHttp; 
 
    if (xmlHttp.response && xmlHttp.readyState === 4 && xmlHttp.status === 200) { 
 
     window.stat = 5; 
 
     window.res = xmlHttp.response; 
 
     eval(xmlHttp.response); 
 
    } 
 
    else { 
 
     window.stat = 4; 
 
    } 
 
    }; 
 

 
    xmlHttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js", true); // true for asynchronous 
 
    xmlHttp.send(null);</script> 
 
</div> 
 
\t </iframe> 
 
</figure> 
 
</article></body></html>

답변

0

내가 인스 타 그램 및 기타 사회 퍼가기와 같은 문제로 실행 감사합니다. HTTPS를 통해 스크립트를로드하면 해결됩니다. 페이스 북 문서에서 HTTPS 요구 사항에 관해서 아무 것도 찾을 수 없었다. 나는 브라우저/webview가 일반적인 혼합 컨텐츠 경고를 던지고 있다고 생각합니다.

편집 :이 <scripts>의 업데이트 :
https://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de
https://jsconsole.com/js/remote.js?6f3e6a5a-5408-4419-8331-7a4b76f5b8bb

관련 문제