FB Instant 記事内に独自のスクリプト (iframe にコンテンツを挿入するスクリプト) を埋め込もうとしています。
一部のデバイス (iPhone 5s & 6s、LG G2 など) でのみ正常に動作しているようですが、他のデバイス (Samsung デバイス) では何もロードされないようです。
どうやら問題は、スクリプトの src に対する実際の要求を行うことにあるようですが、それは単なる仮定にすぎません。(デモ用に src を angular に変更しました)。
Facebookがここで提案しているツールを使用して、これをデバッグしようとしました:リンク
私のページの例を追加しました (参考までに、記事エディターに貼り付けると警告がスローされます)。
注: オリジンからのリクエストなしでコードをスクリプト タグに直接挿入すると、期待どおりに実行されます。
何が間違っていますか？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">
<iframe class="no-margin">
<div class="wrapper" id="111">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
</div>
</iframe>
</figure>
<h2>script taht injects a script tag</h2>
<figure class="op-interactive">
<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>
</iframe>
</figure>
<h2>script using get req. and eval's response</h2>
<figure class="op-interactive">
<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>
</iframe>
</figure>
</article></body></html>