Question

我无法在Chrome扩展程序的背景页面上加载iframe。

我已尝试在html页面上单独加载iframe及其工作原理，我认为此问题与chrome扩展程序或浏览器属性有关

例如，如果我在Chrome扩展程序背景页面中添加它

<iframe id="stackoverflow" src="https://www.stackoverflow.com"></iframe>

我总是被取消状态

screenshot

与'ws：// localhost：35729 / livereload'的WebSocket连接失败：连接建立错误：net :: ERR_CONNECTION_REFUSED

的manifest.json：

{
  "name": "__MSG_appName__",
  "short_name": "ixigo",
  "version": "3.1.24",
  "manifest_version": 2,
  "description": "__MSG_appDescription__",
  "icons": {
    "16": "images/16.png",
    "48": "images/48.png",
    "128": "images/128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "scripts/chromereload.js",
      "scripts/libs/jquery.min.js",
      "scripts/src/config.js",
      "scripts/src/track.js",
      "scripts/src/userIntentHandler.js",
      "scripts/src/background.js",
      "scripts/src/OneSignal.js",
      "scripts/src/notificationsHandler.js"
    ],
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "all_frames": true
    },
    {
      "matches": [
        "*://www.irctc.co.in/*",
        "*://*.ixigo.com/*"
      ],
      "js": [
        "scripts/src/irctcAutofill.js",
        "scripts/src/irctcAutofillEventHandler.js"
      ],
      "all_frames": false
    },
    {
      "matches": [
        "*://*.indianrail.gov.in/*",
        "*://*.ixigo.com/*"
      ],
      "js": [
        "scripts/libs/jquery.min.js",
        "scripts/src/train.js",
        "scripts/src/trainAvailability.js",
        "scripts/src/runningStatus.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "chrome_url_overrides": {
    "newtab": "ixitab.html"
  },
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": [
    "tabs",
    "http://*.indianrail.gov.in/*",
    "*://*.ixigo.com/*",
    "cookies",
    "notifications",
    "gcm",
    "storage"
  ],
  "web_accessible_resources": [
    "images/*",
    "fonts/*",
    "styles/*"
  ],
  "update_url": "http://clients2.google.com/service/update2/crx",
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://api.bing.com/osjson.aspx object-src 'self'"
}

Answer 1

因此，Chrome＆＃34;取消＆＃34;可能出于安全原因在后台页面中加载iframe。但它仍能正常处理，可以按照您的预期发送和接收消息。我有一个演示设置here，可以在后台页面中加载iframe，向其发送消息，iframe会回复消息。

由于请求显示已取消，我正在使用的第三方库正在加载iframe以尝试获取新令牌，但是失败并且我需要将其重新配置为仍然挂钩即使它认为它没有正确加载，也要进入消息传递。

您无法直接通过后台页面访问iframe的DOM /窗口，所有事件都必须通过邮件作为安全预防措施。

此外，也许更重要的是你的实际问题，连接的错误是＆＃34; localhost：35729 / livereload＆＃34;，你的manifest.json中没有定义该地址许可部分，很可能因此被Chrome中止。

后代的代码：

<强> background.js

＆＃13;

window.onload = function(){
    var frame = document.createElement('iframe');
    frame.src = 'https://crustyjew.github.io/ChromeExtensionBug/';
    document.body.appendChild(frame);

    window.addEventListener('message',function(e){
      console.log("message received: " + JSON.stringify(e.data));
    });
    console.log('posting message to iframe');
    
    frame.addEventListener('load',function(){
        frame.contentWindow.postMessage("TestMessage","*");
    });
};

＆＃13;

<强>的manifest.json

＆＃13;

{
    "name": "BackgroundIframeBug",
    "short_name": "BGIframeBug",
    "version": "1.0.0",
    "manifest_version": 2,
    "background":{
        "scripts":["background.js"]
    },
    "permissions":[
        "<all_urls>"
    ]
}

＆＃13;

要在iframe中加载的回显页面

＆＃13;

index.js =>

window.onload=function(){
  function receiveMessage(e){
    console.log('received message');
    var origin = event.origin || event.originalEvent.origin; 
    e.source.postMessage({'origin':origin,'message':e.data},"*");
  }
window.addEventListener('message',receiveMessage);}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <script src="index.js"></script>
  </body>
</html>

＆＃13;

Answer 2

看起来该服务器已关闭。我看到你在NTES上引用的链接，但他们现在还没有真正进入网页。试试自己：

此外，如果/当该网站的该部分上线时，您将点击一个＆＃34;披露页面＆＃34;这可能会创建一个会话状态，在您浏览时跟随您。尝试将iframe直接插入到这样一个有围墙的花园内部也会产生ERR_CONNECTION_REFUSED警告。这个URL上发生了什么：

http://enquiry.indianrail.gov.in/ntes/

它是一种常用的方法，可以防止内容流浪。：）

Chrome扩展程序背景页面中的iframe始终被取消

2 个答案: