从 iframe 内部访问父内容（在同一台服务器机器上） jquery 在 firefox 和 IE 中工作，但不在 chrome 中答案

【问题标题】：accessing parent contents from inside iframe(on the same server machine) jquery working in firefox and IE but not in chrome从 iframe 内部访问父内容（在同一台服务器机器上） jquery 在 firefox 和 IE 中工作，但不在 chrome 中
【发布时间】：2016-11-27 05:31:26
【问题描述】：

我正在开发一个音乐网站，该网站包含一个带有 iframe 和播放器的父页面。单击菜单时，iframe 的 src 会根据单击的菜单项而变化。在一页中，iframe 包含音乐项。当在 iframe 中单击音乐时，我想将该音乐添加到播放列表中（包含在父级中）。我的 jQuery 代码在 Firefox 和 Internet Explorer 中运行，但在 chrome 中运行。它在下面给出了一个错误..

Uncaught SecurityError: Blocked a frame with origin "null" from 访问原点为“null”的框架。协议、域和端口必须匹配。 ...

这是我的代码

$('span[name=add]').click(function(){

    var song = $(this).attr("song");
    var cover = $(this).attr("cover");
    var artist = $(this).attr("artist");
    window.parent.$('#playlist').prepend('<li song="'+song+'" cover="'+cover+'"artist="'+artist+'">'+song+'</li>');
    window.parent.$('#playlist').trigger('change');

});

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

很确定这是为了阻止网络钓鱼。

我之前没有这样做来操作 DOM，但是当我遇到这个错误时，我发现这种模式有效。

在父窗口中创建函数。
从 iframe 调用函数。

还没有测试过这个确切的代码，只是举例。

父母

window.newHtml = "";
window.setHtml = function() {
    $('#someElement').html(window.newHtml);
};

内嵌框架

newHtml = "<p>yo!</p>";
setHtml();

【讨论】：