个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在开发一个 Chrome 扩展程序，用于我自己的 Web 应用程序，处理网页(包括跨域网页)，加载到我的应用程序主页上的 iFrame 中。因此，我必须从主页面向内容脚本发送包含要处理的页面 URL 的消息，并将其注入(inject)到目标 iFrame 中，以访问已处理页面的窗口。
我尝试实现描述的方法 here 。以下是涉及的所有文件的基本部分:
index.html:
...
<head>
...
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<div>
<input type="text" id="page_url"> <input type="button" id="get_page" value="Get page">
</div>
<iframe id="cross_domain_page" src=""></iframe>
</body>
base.js:
(function() {
"use strict";
function pageProcessing() {
let urlButton = window.document.getElementById("get_page");
urlButton.addEventListener("click", () => {
let url = window.document.getElementById("page_url").value;
window.postMessage(
{
sender: "get_page_button1",
message: url
},
"*"
);
window.postMessage(
{
sender: "get_page_button2",
message: url
},
"*"
);
});
}
window.document.addEventListener('readystatechange', () => {
if (window.document.readyState == 'complete') {
pageProcessing();
}
}
);
})();
manifest.json:
{
"manifest_version": 2,
"name": "GetPage",
"version": "0.1",
"content_scripts": [
{ "js": ["main.js"], "matches": ["<all_urls>"] },
{ "js": ["frame.js"], "matches": ["<all_urls>"], "all_frames": true, "match_about_blank": true }
],
"permissions": ["activeTab"]
}
main.js:
(function() {
"use strict";
window.isTop = true;
})();
frame.js:
(function() {
"use strict";
window.addEventListener("message", (event) => {
if (event.data &&
event.data.sender == "get_page_button1") {
if (window.isTop) {
alert("Main window alert");
} else {
alert("Frame window alert 1");
}
}
});
if (!window.isTop) {
window.addEventListener("message", (event) => {
if (event.data &&
event.data.sender == "get_page_button2") {
alert("Frame window alert 2");
}
});
}
})();
问题是，当我单击“get_page”按钮时，我看到的唯一警报是主窗口警报。据我的理解，这意味着从主窗口发布的消息没有到达注入(inject)到 iFrame 中的内容脚本。
我的脚本有什么问题以及如何解决该问题？
最佳答案
网络应用中的 window.postMessage 发送到主文档的窗口，而不是 iframe 的。
指定 iframe 的窗口对象:
document.getElementById('cross_domain_page').contentWindow.postMessage(.......)
或者，您可以切换到更安全的 externally_connectable消息传递。
关于javascript - 如何将消息发布到 iFrame 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61548354/
25
4
0
我是一名优秀的程序员,十分优秀！