个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
目标:复制一段 HTML 并将其发送到另一个域中的网站。
我的问题:我正在处理的网站和 iframe 中的网站位于不同的域中。我拥有它们两个，并设置了 Access-Control-Allow-Origin 以允许网站相互通信。但是，我似乎无法将 HTML block 传递给父窗口。
我试过 parent.window.postMessage(chunk, http://www.parent-page.com) (chunk 是 HTML 代码块)但是我得到这个错误:未捕获的 DataCloneError:无法在“Window”上执行“postMessage”:无法克隆对象。
我也尝试过使用 ajax 向父窗口发送 PUT 请求，但是我收到 404 错误，它找不到父窗口。 *我正在从本地服务器运行父窗口。
我的问题:如果这两个网站不在同一个域中，谁能告诉我将包含 HTML 代码的对象从 iframe 发送到父窗口的最佳方法？
编辑:我删除了关于骨架对象的内容，因为那超出了我真正想问的问题的范围。
最佳答案
这是我为解决这个问题而写的。欢迎任何建设性的批评。
//send a message to the website in the iframe
$("#frame").on("load", function (event) {
var viewContainer = $('#element-highlight');
var iframe = document.querySelector('iframe');
var receiver = iframe.contentWindow;
var location = 'http://www.child-website.com';
event.preventDefault();
receiver.postMessage("sendStructure",location);
});
//listen for a response
window.addEventListener('message', function(event) { //event = onmessage event object
if (~event.origin.indexOf('http://ccook.oegllc.com')) { //indexOf returns a -1 if the searchValue is not found
var structure = event.data;
var container = document.getElementById("element-highlight");
container.innerHTML = structure;
}
}<script src="../jquery/3.0.0/jquery.min.js"></script>
<body>
<div id="frame-container">
<iframe id="frame" src="http://www.main-site.com" frameborder="0"></iframe>
<div id="element-highlight">
<!-- Store Skeleton Copies here -->
</div>
</div>
</body>我无法让下面的 case 语句看起来更好。
//listen for command from main-site.com
window.addEventListener('message', function(event) { //event = onmessage event object
if (~event.origin.indexOf('http://www.main-site.com')) { //indexOf returns a -1 if the searchValue is not found
switch(event.data){
case "sendStructure":
var structure = getStructure(),
tempNode = document.createElement("div");
structure.appendTo(tempNode); //appends structure to html document
var str = tempNode.innerHTML; //creates a serilized version of the structure
parent.window.postMessage(str, event.origin); //send structure string to main-site.com
break;
//I reccomend using a case statement if the two sites will be sending more than one message to each other
default:
sendError();
}
}
});
function getStructure(){
//this method creates a skeleton of the course page you are on
//returns a skeleton object
console.log("compiling structure");
var viewFrame = $('body').contents(); //<-change 'body' to whatever element you want to copy
var visible = viewFrame.find('*:not(html body)').filter(':visible');
var overlayElements = visible.map(function (i, el) {
var el = $(el);
var overlayEl = $('<div>');
overlayEl.addClass('highlight').css($.extend({
position: 'absolute',
width: el.outerWidth(),
height: el.outerHeight(),
'z-index': el.css('z-index')
}, el.offset()));
return overlayEl.get();
});
return overlayElements;
}
function sendError(){
console.log("main-website's request could not be understood");
}关于javascript - 使用 postMessage() 将一大块 HTML 发送到另一个 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38446318/
24
4
0
我正在掌握 Chrome 自定义选项卡中可用的功能，我很想知道如何在自定义选项卡和应用程序本身之间进行通信。我可以在 CustomTabsSession 中看到有类似 requestPostMessa
我正在创建 Cypress e2e 测试，但是我们的应用程序作为父页面顶部的模态 (iframe) 打开。由于 Cypress 不支持 iframe，我决定尝试“独立”运行应用程序。但是，在启动应用程
显然，使用 window.postMessage是 preferred way在所有现代浏览器中通过 window.setTimeout(fn, 0) 对异步 javascript 回调进行排队。我找
我有 2 个应用程序，一个是隐藏窗口(“hW”)，另一个是控制台应用程序(“CA”)，来自我想向硬件发送命令。在控制台应用程序中，我得到了硬件句柄，这是一个问题:如果我正在运行: PostMessag
所以我在 Html5 Demos 上摆弄 Html5 PostMessage 示例我创建了一个示例 jsfiddle看看我是否理解它是如何协同工作的。 该演示使用了 document.getEleme
我有一个包含 iFrame 的基本 HTML 页面。当父级加载并且 iFrame 在其中时，iFrame 执行以下 javascript: myParent = window.top; if (win
我有以下脚本 父页面(pair_pixel_filter.php): window.addEventListener("message", function(e) { $('
我遇到的问题是，在注册服务 worker 后，navigator.serviceWorker.controller 始终为 null。 我想使用 postMessage 向 service worke
我正在使用 window.postMessage 函数与 Angular Controller 通信 iframe https://developer.mozilla.org/en-US/docs/W
我在关注 this本地消息传递指南，但现在我陷入了停滞。 Firefox 上的开发者控制台不断给我同样的错误: “尝试在断开连接的端口上发布消息”以及之前的“Webconsole 上下文已更改”。 我
有一个问题我无法解决。我在 Delphi 中创建了两个服务应用程序并尝试在其中发布消息。当然，此类应用程序中没有窗口，PostMessage 需要一个窗口句柄参数来发送消息。 因此，我使用 Alloc
到目前为止，我只看到过关于 postmessage 的教程，其中一个窗口发送一种消息，而另一个窗口仅以一种方式解释消息。 如果我想在窗口之间进行许多不同类型的交互怎么办，postmessage 可以处
我有一个带有视频 API 的 HTML 5 简单表单，我想在用户单击提交按钮时播放视频 这里是演示 HTML 表单输入。 HTML 5
我不知道该怎么办。我尝试了来自不同来源的几个示例代码，我在不同的浏览器(从 Chrome 9 到 FF 4)中尝试了它们，但似乎仍然没有任何东西可以与“postMessage”功能一起使用。JS 控制
我正在尝试将消息从父窗口发布到它打开的子窗口。然而，该消息并未被发布。 在父窗口脚本中: function editAnnotation(annotKey){ var annotString
我正在使用 var handle = window.open(url, name, options) 创建一个弹出窗口。该窗口包含许多允许用户导航的链接。用户完成导航后，可以单击按钮来表示已完成。当用
我有一个包含表单的 iframe，在该 iframe 中我有以下内容: // Send a message to the parent window window.parent.postMessag
我正在尝试将消息从父窗口发布到它打开的子窗口。然而，该消息并未被发布。 在父窗口脚本中: function editAnnotation(annotKey){ var annotString
我正在尝试使用 Ben Almans jquery postmessage调整 iFrame 的大小。我或多或少地将他的示例与不同的服务器和动态内容一起使用。 我也在该网站上发布了一个问题，但这可能是
我正在尝试使用实验性 Canvas 功能 - offscreenCanvas。 index.html const canvas = document.queryS
我是一名优秀的程序员,十分优秀！