我无法在chrome扩展程序的背景页面上加载iframe。
我尝试过在HTML网页上单独加载iframe，并且可以正常工作，我认为此问题与chrome扩展名或浏览器属性有关
例如，如果我将其添加到chrome扩展程序后台页面中
<iframe id="stackoverflow" src="https://www.stackoverflow.com"></iframe>
我总是被取消身份
WebSocket connection to 'ws://localhost:35729/livereload' failed: Error in connection establishment: 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'"
}
最佳答案
因此，似乎出于安全原因，Chrome浏览器“取消”了iframe在后台页面中的加载。 但仍然可以正确处理，并且可以按您期望的方式发送和接收消息。我有一个设置here的演示，它在后台页面中加载了iframe，向它发送了一条消息，然后iframe回显了该消息。
由于请求显示已取消，因此我正在使用的第三方库恰巧加载了iframe尝试获取新 token ，但失败了，我需要重新配置它以仍然挂接到消息传递中，即使它认为它没有正确加载。
您永远无法直接通过后台页面访问iframe的DOM/窗口，所有事件都必须通过消息进行传递，以确保安全。
另外，也许对您的实际问题更重要的是，连接到您时出现的错误是“localhost:35729/livereload”，该地址未在manifest.json权限部分中定义，并且可能会被chrome中止对此。
后代的代码:
background.js
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","*");
});
};manifest.json
{
"name": "BackgroundIframeBug",
"short_name": "BGIframeBug",
"version": "1.0.0",
"manifest_version": 2,
"background":{
"scripts":["background.js"]
},
"permissions":[
"<all_urls>"
]
}回显页面以在iframe中加载
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);}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="index.js"></script>
</body>
</html>关于google-chrome - chrome扩展程序后台页面中的iframe总是被取消，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42504482/