Facebook即时文章自定义嵌入;不要提出要求
Facebook Instant Article custom embed doesn't make requests
我正试图将我自己的脚本(它为iframe注入一些内容)嵌入到FB Instant文章中。
它似乎只适用于某些设备(例如iPhone 5s和6s,LG G2),但其他设备(三星设备)似乎没有加载任何内容。
显然,问题在于实际请求脚本的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>
我在Instagram和其他社交嵌入中遇到了同样的问题。通过HTTPS加载脚本为我解决了这个问题。我在Facebook文档中找不到任何关于HTTPS要求的信息。我猜浏览器/webview正在抛出一个通用的混合内容警告。
编辑:更新这些<scripts>
:
https://jsconsole.com/js/remote.js?762226ac-81f8-4a2a-8403-4f834c8db5de
https://jsconsole.com/js/remote.js?6f3e6a5a-5408-4449-83331-7a4b76f5b8bb
相关文章:
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- jQuery自定义验证比较多个输入的序列
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 在wordpress一定时间后更改自定义字段
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 自定义函数中的光标位置
- 用于检查数组中是否存在元素的javascript自定义方法
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- Meteor-添加用户自定义字段的方法不起作用
- 自定义表单验证和提交
- jQuery工具验证器自定义效果-添加&消除影响
- 可以't计算自定义谷歌地图的js
- 谷歌水印未显示在自定义搜索框中
- vaadin:使用自定义布局集成angular js
- DataTables-创建自定义分页样式(加载更多样式)
- 实现一个建立在google.com之上的自定义搜索引擎
- 添加自定义标记以自动完成
- 如何使用自定义标头跨域执行AJAX POST
- Facebook即时文章自定义嵌入;不要提出要求