在父页面的 iframe 中实现 JavaScript 时权限被拒绝答案

【问题标题】：Permission denied when implementing JavaScript within an iframe from the parent page在父页面的 iframe 中实现 JavaScript 时权限被拒绝
【发布时间】：2015-07-20 14:36:30
【问题描述】：

我正在尝试在父页面的 iframe 中实现 JavaScript。我读了Invoking JavaScript code in an iframe from the parent page，但是，得到以下错误。

Error: Permission denied to access property "showIt"
document.getElementById('targetFrame').contentWindow.showIt();

我已经尝试在 jsfiddle 和我的服务器上实现这一点（不知道这是否重要，但它使用 https），但得到相同的结果。我还尝试删除子 iframe 上的 $(function(){}) 包装器，但没有任何变化。

我的实际应用如下所述。

如何做到这一点？

我的申请：

我的父页面 https://jsfiddle.net/5f4ct5ph/6/) 包含一个 iframe。

<iframe width="100%" height="300" src="https://jsfiddle.net/5f4ct5ph/5/embedded/result/" id="targetFrame"></iframe>

<button id="show">Show</button>
<button id="hide">Hide</button>

$(function () {
    $('#show').click(function () {
        document.getElementById('targetFrame').contentWindow.showIt();
    });
    $('#hide').click(function () {
        document.getElementById('targetFrame').contentWindow.hideIt();
    });
});

iframe 页面 (https://jsfiddle.net/5f4ct5ph/5/) 包含一个 tinymce 编辑器。

<div id="content">Initial content goes here</div>

#content {height:200px;width:400px;border: 1px solid;}

$(function () {
    tinymce.init({
        selector: "#content",
        width : 400,
        height: 200,
        setup : function(ed) {
            ed.on('init', function(e) {
                e.target.hide();
            });
        }
    });

    function showIt() {
        tinymce.get('content').show();
    };

    function hideIt() {
        tinymce.get('content').hide();
    };
});

【问题讨论】：

标签： javascript jquery iframe https tinymce

【解决方案1】：

fiddle.jshell.net（父文档域）与 jsfiddle.net（您的 iframe 域）不同。

我已将您的代码更改为指向 jshell.net 网址（您可以通过使用 jsfiddle 右下角框架的网址而不是地址栏来获取此网址）。

https://jsfiddle.net/GarryPas/5f4ct5ph/7/

showIt() 和 hideIt() 似乎没有被定义（因为它们在匿名函数中）。改变这个：

$(function () {
    ...

    function showIt() {
        tinymce.get('content').show();
    };

    function hideIt() {
        tinymce.get('content').hide();
    };
});

到这里：

$(function () {
    ...
});

function showIt() {
    tinymce.get('content').show();
}

function hideIt() {
    tinymce.get('content').hide();
}

然后删除我的警报并放回我注释掉的原始代码。

【讨论】：

【解决方案2】：

通常，如果 iframe 和父级在同一个域上，它应该可以工作，但是窗口到窗口之间的通信存在限制。您可以尝试使用 postMessage，如下所示：

在您的父页面中，在点击事件中，您可以这样做：

child_window = document.getElementById('targetFrame').contentWindow;
child_window.postMessage("showit" or "hideit", your_domain);

在你的 iframe 中：

window.addEventListener("message", check_message, false);

function check_message(event){
    switch(event.data){
        case "showit":
            showIt();
            break;
        case "hideit":
            hideIt();
            break;
        default:
            breaks;
    }

确保你的函数 showIt 和 hideIt 在你调用 check_message 的地方可用。

同样，可能还有一个问题，用嵌入的 jsfiddle 很难说清楚，但无论如何，在处理 iframe 和 javascript 时，postMessage 通常比直接访问函数和变量更灵活和安全。

【讨论】：