簡體   English   中英

Facebook Instant Article自定義嵌入不會發出請求

[英]Facebook Instant Article custom embed doesn't make requests

我正在嘗試在FB Instant文章中嵌入自己的腳本(該腳本將向iframe注入一些內容)。

它似乎僅適用於某些設備(例如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-4419-8331-7a4b76f5b8bb

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM