Facebook Instant Article自定义嵌入不会发出请求

Question

I'm trying to embed my own script (which injects an iframe with some content) inside a FB Instant article. 我正在尝试在FB Instant文章中嵌入自己的脚本（该脚本将向iframe注入一些内容）。

It seems to be working properly only for some devices (eg iPhones 5s & 6s, LG G2) but others (Samsung devices) don't seem do load anything. 它似乎仅适用于某些设备（例如iPhone 5s和6s，LG G2），但其他设备（三星设备）似乎没有加载任何东西。

Apparently the problem is in making the actual request for the script's src, but it is just an assumption. 显然问题出在对脚本的src的实际请求中，但这只是一个假设。 (i've changed the src into angular's for demonstration). （我已将src更改为angular进行演示）。

I've tries to debug this using the tools Facebook suggests here: Link 我已经尝试使用Facebook在此处建议的工具调试该链接：

I've added an example of my page (just for reference, if you paste it into the article editor it will throw a warning). 我已经添加了页面示例（仅供参考，如果将其粘贴到文章编辑器中，则会引发警告）。

Note: when my code is inserted into a script tag directly without a request from some origin it runs as expected. 注意：当我的代码直接插入到脚本标签中而没有来自某些来源的请求时，它将按预期运行。

What is the wrong? 怎么了 Why doesn't FB Instant Articles makes the call for my script? 为什么FB Instant Articles不会调用我的脚本？

Thank you 谢谢

 <!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>

Answer 1

I ran into the same issue with Instagram and other social embeds. 我在Instagram和其他社交嵌入中遇到了同样的问题。 Loading the scripts over HTTPS resolved it for me. 通过HTTPS加载脚本为我解决了该问题。 I couldn't find anything about HTTPS requirements in the Facebook documentation. 我在Facebook文档中找不到有关HTTPS要求的任何信息。 I'd guess the browser/webview is throwing a generic mixed-content warning. 我猜想浏览器/ webview会抛出一个通用的混合内容警告。

Edit: Update these <scripts> s: 编辑：更新这些<scripts> ：
https://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de https://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de
https://jsconsole.com/js/remote.js?6f3e6a5a-5408-4419-8331-7a4b76f5b8bb https://jsconsole.com/js/remote.js?6f3e6a5a-5408-4419-8331-7a4b76f5b8bb

Facebook Instant Article自定义嵌入不会发出请求

问题描述

1 个解决方案

解决方案1
0 2017-10-27 20:16:16

Facebook Instant Article自定义嵌入不会发出请求

问题描述

1 个解决方案

解决方案1 0 2017-10-27 20:16:16

解决方案1
0 2017-10-27 20:16:16