2016-07-20 4 views
4

私はFBインスタント記事の中に独自のスクリプト(iframeにコンテンツを埋め込む)を埋め込もうとしています。Facebook Instant Articleカスタム埋め込みがリクエストを作成しない

いくつかのデバイス(iPhone 5s & 6s、LG G2など)では正しく動作しているようですが、他のデバイス(Samsungデバイス)では何も読み込まれないようです。

明らかに、問題は実際にスクリプトのsrcを要求することですが、これは単なる前提です。 (デモ用にsrcをangularに変更しました)。

私はFacebookが、ここで提案するツールを使用して、これをデバッグしようとしました:Link

私は私のページの例を追加しましたあなたは記事エディタに貼り付けた場合(単なる参考のために、それは警告をスローします)。

注:私のコードが何らかの起源からの要求なしにスクリプトタグに直接挿入されると、期待どおりに実行されます。

何が間違っていますか? FBインスタントアーティクルでスクリプトを呼び出せないのはなぜですか?

は、私はInstagramのや他の社会的埋め込み機能と同じ問題に遭遇した

<!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経由でスクリプトを読み込むと、私のために解決されました。私はFacebookのドキュメントでHTTPS要件について何も見つけることができませんでした。私はブラウザ/ webviewは、一般的な混合コンテンツの警告を投げていると思います。

編集:
https://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de
https://jsconsole.com/js/remote.js?6f3e6a5a-5408-4419-8331-7a4b76f5b8bb

:これら <scripts>秒を更新
関連する問題