个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-11-01 04:40:14 24 4
gpt4 key购买 nike

我正在尝试在 FB Instant 文章中嵌入我自己的脚本(注入(inject)带有一些内容的 iframe)。

它似乎只适用于某些设备(例如 iPhone 5s 和 6s、LG G2)，但其他设备(三星设备)似乎无法加载任何东西。

显然问题在于对脚本的 src 发出实际请求，但这只是一个假设。 (为了演示，我已经将 src 更改为 angular)。

我尝试使用 Facebook 在此处建议的工具对此进行调试: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">
	<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-4419-8331-7a4b76f5b8bb

关于javascript - Facebook Instant Article 自定义嵌入不发出请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38484674/

24 4 0
文章推荐： ios - Xcode 4.5 - 无法通过 iTunes 安装开发人员 .ipa 文件
文章推荐： objective-c - ARC 是否保证在最后一个强引用消失后立即释放对象？
文章推荐： ios - 将 'NSNumber *__strong' 发送到不兼容类型 'CLLocationDegrees' 的参数(又名 'double' )
文章推荐： ios - 使用 "PhoneGap Build"提交到 App Store 构建的 PhoneGap 应用程序
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com