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在同一个域上，它应该可以工作，但是从窗口到窗口的通信存在限制。您可以尝试使用postMessage，如下所示：

在您的父页面中，在click事件中，您可以执行以下操作，而不是直接调用该函数：

CREATE TRIGGER CheckIfUnique_mydata_value ON dbo.data
AFTER insert, update
AS
BEGIN
--check if we passed multiple values
  IF EXISTS(SELECT 1 FROM inserted GROUP BY value HAVING COUNT(*) > 1)
  BEGIN
    RAISERROR('You tried to insert a duplicate value within the result set. Ensure you only pass unique values!', 16,1)
  END
  --check if we inserted a value that already exists that is not me (works for updates on me too!)
  IF EXISTS(SELECT 1 FROM dbo.data m INNER JOIN inserted i ON m.value = i.value AND m.id <> i.id)
  BEGIN
    RAISERROR('Duplicate Value found',16,1)
  END
END;

你在iframe：

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

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

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

Answer 2

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

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

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

似乎没有定义

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

对此：

<table id="items">
<tr>

    <td><input type="text" name="description[]"/></td>
    <td><input type="text" name="quantity[]" id="quantity[0]" onkeyup="sum(0);"/></td>
    <td><input type="text" name="price[]" id="price[0]" onkeyup="sum(0);"/></td>
    <td><input type="text" name="lineTotal[]" id="lineTotal[0]" readonly /></td>
    <td><input type="button" onclick="addLine();" value="+" /></td>

</tr>
</table>
<script>
var i = 0;
function addLine() {
        i++;        
        var row = document.createElement('tr');
        var td = document.createElement('td');
        td.innerHTML = '<input type="text" name="description['+i+']" id="description['+i+']"/>';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="text" name="quantity['+i+']" id="quantity['+i+']" onkeyup="sum('+i+');"/>';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="text" name="price['+i+']" id="price['+i+']" onkeyup="sum('+i+');"/>';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="text" name="lineTotal['+i+']" id="lineTotal['+i+']" readonly/>';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="button" onclick="removeLine(this.parentNode.parentNode)" value="-">';
        row.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = '<input type="button" onclick="addLine();" value="+" />';
        row.appendChild(td);

        document.getElementById('items').appendChild(row);
    }

    function removeLine(row) {
      document.getElementById('items').removeChild(row);
    }

    function sum(i) {
        var q = document.getElementById('quantity['+i+']').value;
        var p = document.getElementById('price['+i+']').value;
        var result = parseInt(q) * parseInt(p);

        if(q=="" || p==""){
            document.getElementById('lineTotal['+i+']').value = 0;
        }

        if (!isNaN(result)) {
            document.getElementById('lineTotal['+i+']').value = result;
        } 
    }

</script>

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

从父页

2 个答案: