在父页面的 iframe 中实施 JavaScript 时权限被拒绝

Question

我正在尝试在父页面的 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();
    };
});

Answer 1

通常情况下，如果 iframe 和 parent 在同一个域中，它应该可以工作，但是从 window 到 window 的通信有限制。您可以尝试使用 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往往比访问函数和变量更灵活和安全直接。

Answer 2

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

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

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();
}

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

在父页面的 iframe 中实施 JavaScript 时权限被拒绝

Permission denied when implementing JavaScript within an iframe from the parent page

javascript

https

iframe

jquery

tinymce