postMessage 在 IE11 上仍然损坏?

2023-12-26

当消息为 IE 11 时,window.postMessage 似乎仍然被破坏

  • 在窗口和子弹出窗口/选项卡之间使用 window.open
  • 当它从不同的域发送时[或在某些情况下相同的域,参见更新 16/01]

IE 8/9/10 也存在类似问题,但此功能在 IE 10 中被标记为“部分支持”,在 IE 11 中被标记为“支持”

有一个代码示例适用于 chrome/ff 但不适用于 IE:

The 开场白(jsfiddle) http://jsfiddle.net/L4YzG/5/:

$(document).ready(function() {
    $('#log').append('listening...');
    window.addEventListener("message", function(e){
        $('#log').append("Received message: " + JSON.stringify(e.data));
    }, false);
    $('button').click(function() {
        window.open('http://jsbin.com/eQeSeros/1', 'popup','menubar=no, status=no, scrollbars=no, menubar=no, width=200, height=100');
    });
});

The 子弹出窗口 (jsbin) http://jsbin.com/eQeSeros/1:(如果不是通过jsfiddle打开则不起作用)

$(document).ready(function() {
   $('body').append('sending...');
   window.opener.postMessage("Hello?", "http://fiddle.jshell.net");
   $('body').append('sent...');
});

我从帖子中读到跨源postMessage在IE10中是否被破坏? https://stackoverflow.com/questions/16226924/is-cross-origin-postmessage-broken-in-ie10我们可以使用MessageChannel代替postMessage,但是阅读文档,我没有找到如何在实际案例中使用它,因为你必须将端口传递给子窗口。

在我需要发送消息之前有一个重定向链,所以即使我可以发送端口,我也会丢失最初/重定向之前发送的任何 js 对象。

有更换的想法吗?

更新 14/01:我正在考虑在窗口/选项卡标题中传递我的数据,并定期从父级检查此标题......但这将是一个相当肮脏的伎俩。

更新 16/01:真正糟糕的部分是,即使消息是从同一域发送的,但在被另一个域重定向之后,它也会中断。

这是例子:http://jsfiddle.net/L4YzG/13/ http://jsfiddle.net/L4YzG/13/打开弹出窗口http://jsbin.com/eQeSeros/4/edit http://jsbin.com/eQeSeros/4/edit重定向到http://jsfiddle.net/mxS8Q/2/ http://jsfiddle.net/mxS8Q/2/(发布消息)

如果直接通过最终的 url 重定向来更改 url 弹出窗口http://jsfiddle.net/mxS8Q/2/show http://jsfiddle.net/mxS8Q/2/show这适用于 IE,因为开头和结尾之间没有其他域

我仍在研究我的窗口标题肮脏的把戏。当窗口位于另一个域时,我们无法接收该窗口的标题,但如果它返回到 jsfiddle,则标题可用(不存在之前 postMessage 的问题)。这是示例:http://jsfiddle.net/L4YzG/14/ http://jsfiddle.net/L4YzG/14/...这可能是一个替代解决方案,但我刚刚看到一些关于在 cookie 中传递数据的内容,它只需要进行测试。

更新 04/02:传递标题中的信息是不够的,如果最终域相同但不是跨域,则效果很好。我想注入同一域的 iframe 来传递这些信息,但我也无法共享子窗口对象(postMessage 需要一个可序列化的对象)。

最后,我尝试在注入的 iframe 和子窗口之间共享一个 cookie(在 js 中创建和接收),这在 chrome 和 ff 上运行良好,但仍然无法使用 IE 正确接收它。添加 P3P 标头后工作正常,这似乎是真正的解决方案。 Safari 似乎对这种技术有一些问题,所以我只是保留这种技术作为后备。


它坏了吗?嗯,有点像。

我尝试了各种想法,但无法在您的代码中获取代码jsFiddle http://jsfiddle.net/L4YzG/5/上班。看着这个MSDN 博客文章 http://blogs.msdn.com/b/ieinternals/archive/2009/09/16/bugs-in-ie8-support-for-html5-postmessage-sessionstorage-and-localstorage.aspx,我们发现postMessage仅适用于旧版 IE 中的 IFrame 之间,该问题尚未在 IE 11 中修复。

该文章链接到demo http://www.debugtheweb.com/test/xdm/origin/的问题。有几种解决方法涉及在window.opener。然而,正如该博客所述(强调我的):

不幸的是,这种解决方法通常是不可能的,因为同源策略规定弹出窗口和 window.opener 页面必须是同源的以便调用对方的脚本函数。

所以看来做到这一点的唯一方法是this http://html5demos.com/postmessage2,其中子级托管在父级的 IFrame 中。我创建了一个类似的演示here http://jsfiddle.net/L4YzG/10/,基于您的代码。很简单,但是要向contentWindowIFrame 的,它反过来响应。

我看到建议使用MessageChannel相反,但我也想知道是否使用网络工作者 http://msdn.microsoft.com/en-us/library/ie/hh673568%28v=vs.85%29.aspx可能值得研究,尽管它们的使用当然取决于您任务的性质。这个问题也有答案question https://stackoverflow.com/questions/18187139/postmessage-between-cross-domain-windows-not-working-in-ie10-it-works-for-frame?rq=1,其中使用了 IFrame 方法,但使用了 jQuery UI 对话框来显示它 - 我想如果您愿意的话,您可以在 Bootstrap 中使用模式做同样的事情。


以供参考:

HTML

<iframe id="iframe" src="http://jsbin.com/iLapokOS/7/"></iframe>
<div id="log"></div>
<button id="post-message-button">Post message to window</button>

父脚本

var wnd;

$(document).ready(function() {
    $('#log').append('listening...');

    wnd = $('#iframe')[0].contentWindow;

    window.addEventListener('message', function(e){
      $('#log').append('<br/>Received message: ' + JSON.stringify(e.data));
    }, false);

    $('#post-message-button').click(function() {
        if(!wnd){
            return;
        }
        $('#log').append('<br/>sending...');
        wnd.postMessage('Hello?', 'http://jsbin.com');
    });
});

子 HTML 和 JS

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script>
    $(document).ready(function() {

      window.addEventListener("message", function(e){
        $('body').append('<br/>Origin: ' + e.origin);        
        $('body').append("<br/>Received message: " + JSON.stringify(e.data));

        e.source.postMessage('Hello yourself', e.origin);
      }, false);
    });
  </script>


</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

postMessage 在 IE11 上仍然损坏? 的相关文章

  • ReactiveX:仅对每组中的最后一项进行分组和缓冲

    如何对 Observable 进行分组 并从每个 GroupedObservable 中仅将最后发出的项保留在内存中 这样每个组的行为就像BehaviorSubject 一样 像这样的东西 user 1 msg Anyone here us
  • 从 php 到 JavaScript 的数组

    我正在尝试使用 json 将数组列表从 php 传输到 javascript 但它不起作用 JS ajax url getProfilePhotos php type post post or get method data if you
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 为什么隐式符号到字符串转换会导致 JavaScript 中出现类型错误?

    有一个 toString on Symbol在 ES6 中 它返回字符串表示形式Symbol 但想知道为什么 Symbol 不起作用 运行这个表达式会抛出TypeError我没想到 后者只是打电话吗 toString 在一个新的Symbol
  • 我如何使用 querySelector() 选择具有双类的元素

    当我想使用 querySelector 选择元素时遇到问题 ul class xoxo blogroll ul 我怎样才能选择它ul元素 在我的代码中我像这样使用 var list document body querySelector u
  • 使用命名的成功/错误回调在 AngularJS 中声明一个 Promise

    我正在尝试做一些与 http 服务非常相似的事情 根据我的理解 http 返回一个 Promise 对象 使用它时 语法是 http success function data success callback error function
  • 在多个动态添加的表单上初始化 jQuery validate() 函数

    有人建议最好初始化一个 form validate 在页面加载而不是点击事件上运行 jquery form validate 插件仅允许在输入更改时提交 https stackoverflow com questions 10984196
  • 递归修剪对象中所有元素的更好方法?

    如果我有一个像这样的物体 const obj field subfield innerObj a asdasd asdas innerArr s ssad innerArrObj b adsad 我想出了这样的东西 const trimFi
  • window.open:是否可以打开一个新窗口并修改其 DOM

    我想打开一个新窗口 var my window open iframe html blank height 600 width 600 但当我打开它时 我想修改它的DOM 我尝试过 var div my document createEle
  • 避免在 ES6 的函数内定位 this 的对象作用域

    例如 我正在使用 D3 js 运行一个项目 导入特定模块并调用它们的函数 Setup TypeScript ES6 导入特定的 D3 组件 角6 我有一个对象 在本例中是一个角度指令 并在 SVG 画布上绘制一些圆圈 并希望它们在拖动事件上
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方
  • 自定义指令链接中的 element.replaceWith 仅在第一次调用时有效

    我是 Angularjs 的新手 不太了解幕后的情况 基本上我想创建一个 E 扭结指令 基于控制器中的数据 我动态创建html 就像整个 表 一样 以替换该指令 我的 html 文件中的指令是这样的
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • @aspnet/signalr 与 @microsoft/signalr javascript 库

    aspnet signalr 与 microsoft signalr javascript 库有什么区别 两者似乎都对 DotNetCore SignalR 有效 两者似乎都很活跃 在一些教程中 我找到 aspnet signalr 在Do
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a
  • Javascript 中 if 语句中的假值?

    过去两周 我在学校研究 JavaScript 的事情已经有一段时间了 而且我一直在做我的作业 在 Douglas Crockford 所著的 JavaScript The Good Parts 一书中 作者在第 11 页上列出了 if 语句
  • p5 向量减法“sub”返回错误

    我一直在尝试将 p5 草图上传到 React 构建中 使用react p5 wrapper 我能够成功在屏幕上渲染画布 但是 某些矢量函数会导致错误 var distance this position dist ball position
  • 使用 VBA 通过 Access 导航网页/操作 IE

    你好 StackOverflow 社区 我有一个关于使用 Access VBA 操作 IE 的问题 本质上 我正在尝试编写代码 使用 IE 打开特定网页 在该页面中搜索特定链接 目标链接的名称将取决于用户的情况 通过以编程方式单击该链接导航

随机推荐