为什么 html5 postMessage 对我不起作用?

2024-02-29

我使用几行 javascript 来创建一个 iframe 元素,然后我想向它发送一条消息,如下所示:

function loadiframe (callback) {
    var body = document.getElementsByTagName('body')[0];
    var iframe = document.createElement('iframe');
    iframe.id = 'iframe';
    iframe.seamless = 'seamless';
    iframe.src = 'http://localhost:3000/iframe.html';
    body.appendChild(iframe);
    callback();
}

loadiframe(function() {
    cpframe = document.getElementById('iframe').contentWindow;
    cpframe.postMessage('please get this message','http://localhost:3000');
    console.log('posted');
})

然后,里面http://localhost:3000/iframe.html http://localhost:3000/iframe.html(iframe 的来源)是这样的:

<!DOCTYPE html>
<html>
<head>
<title>does not work</title>
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
  if (event.origin == "http://localhost:3000") {
    document.write(JSON.stringify(event));
    document.write(typeof event);
  }
}
</script>
</head>
<body>
</body>
</html>

但什么也没发生...我什至尝试不使用来源安全检查,但即使这样也没有发生...就像它从未收到消息一样...

我遇到某种异步问题吗?我试图确保 iframe 在 postMessage 消失之前已加载......

EDIT1:另外,控制台上没有显示错误......

EDIT2:我在 Google Chrome 11 和 Firefox 4 中尝试过

先感谢您。


有两个可能的问题:

  1. 你正在呼唤callback在子框架加载之前 - 尝试在load事件或在setTimeout
  2. 我从来没有成功过postMessage与以 '*' 作为原点的任何其他内容一起工作。如果我在其中输入 URL,则会收到安全警告“安全错误:内容位于http://xxx/ http://xxx/可能无法加载数据http://yyy/ http://yyy/”,除了仅在错误控制台(Ctrl + Shift + J)中,而不是在任何其他地方。我怀疑还需要在某个地方设置一些其他东西才能使其工作,但我还没有弄清楚是什么。

这是一个jsfiddle http://jsfiddle.net/robertc/Bh8jB/稍微修改一下代码版本,从我的域加载文档,在 Firefox 和 Chrome 中适用于我。

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

为什么 html5 postMessage 对我不起作用? 的相关文章

  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • Twitter 卡元标签问题

    有问题的网址 https www halleonard com viewpressreleasedetail action releaseid 10261 https www halleonard com viewpressreleased
  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n
  • Safari 背景图像黑线

    Safari 7 0 我不知道为什么 但我在背景图像上看到黑线 当我调整浏览器窗口大小时 垂直窗口消失 有谁知道它是什么 website fedoriv com http www fedoriv com only Russian sorry
  • 将 CSS 网格中的文本放置在图像上方

    我有一个 CSS 网格 需要在图像上放置一些文本 下面显示了我使用的代码 图像上没有文字 sbp item12 grid row 6 7 grid column 9 13 height 250px div class sbp item12
  • 设置img src而不发出请求

    作为构建复制和粘贴代码的一部分 我们必须使用 dom 元素 并将文本 其他 dom 元素附加到其中 最终结果将是要复制的代码 但是 当附加图像元素时 浏览器always发出对图像 src 的请求 有什么办法解决吗 i e var img d
  • Javascript代码可以在jsfiddle中运行,但不能在浏览器中运行[关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我尝试搜索类似的问题 但无法找到我的代码在 jfiddle 中工作但在浏览器中不起作用的原因 我还尝试将我的代码从 jfiddle
  • 水平居中包含浮动 li 元素的

    我一直在尝试制作一个带有悬停下拉菜单的水平导航栏 我已经让它工作了 但是为了让 中的所有元素并排 水平 它们必须应用 float left 有什么办法让他们回到中心吗 另外 我的 CSS 编码风格 正确吗 我觉得我做错了 谢谢 HTML d
  • DIV 内的右对齐按钮

    作为一名后端开发人员 我感觉更舒服 但我有一个样式问题困扰着我 我已经发布了我的场景示例here http jsfiddle net jDaM8 1 我正在创建一个 div 它根据单击按钮显示 隐藏以显示特定项目的详细信息 该部分工作正常
  • 使用 Java 处理 HTML(多部分表单数据)文件上传

    我正在为概念验证 Web 应用程序开发多文件上传解决方案 我正在使用 java servlet 来处理 AJAX 文件上传 我的问题是java如何处理从HTML表单上传文件 如果有人可以解释如何处理基本的 HTML 文件上传 那么我可能可以
  • Anchor Cycler / 下拉菜单定期导入学校班级数据

    SO 我最近一直在研究一些 html javascript css 为我的学生创建一个在线表格来查看详细信息 分数和各种信息 但我遇到了困难 不确定如何做我正在尝试的事情去做 我将所有这些内容发布在一个线程中的原因是因为我认为其中几个可能会
  • 如何使 CSS 样式覆盖 JavaScript 应用的样式

    我动态创建一个 HTML 表 并应用一些样式 var tbl document createElement table tbl id CrewMemberTable document getElementById CrewMemberPan
  • 如何对基于 HTML5-JavaScript 的视频播放器进行快照?

    实际上 我有一个带有 JavaScript 函数的 HTML5 页面 可以让我播放 wmv 视频文件 我需要在视频播放时 有暂停或没有暂停 拍摄快照并以任何图像格式 JPG 或 BMP 保存 任何帮助将不胜感激 谢谢
  • 如何在C#中使用默认浏览器打开带有锚点(#)的html文件

    我正在尝试在 C 中打开上下文帮助文件 当我没有指定锚点时 它工作得很好 Process Start C Help Help htm 但是当我指定锚点时 它不会打开 Process Start C Help Help htm Toc3420
  • 如何使用 HTML5 在画布上绘制心电图监视器?

    我尝试使用canvas html5绘制心电图系统 几乎我即将完成我的波浪正在移动 但不是连续地重复 但我想绘制波浪是从左到右连续移动的 下面的链接是示例 Ex https www youtube com watch v wuwBfSpVEg
  • <输入类型=按钮> 与 <按钮> [重复]

    这个问题在这里已经有答案了 我有点困惑 这些有什么区别呢 请不要引用非常旧的帖子 我注意到在 html 和样式表中访问某些样式是不同的内联样式

随机推荐