0

我的索引html：

<html>
<head>
    <title>index</title>
    <script src="jquery.js"></script>
</head>
<body>
    <h1>Index</h1>
    <hr/>
    <iframe id="frame"></iframe>
    <hr/>
    <button id="btn">Click</button>

    <script>
    $(function(){

        window.api = {
            fun: function(){alert('index api')}
        };

        var frame = document.getElementById('frame');
        frame.src = 'frame.html';           
    });


    $('#btn').click(function(){
        $('#frame').contents().find('body').css('backgroundColor', 'red');
        $('#frame').contents().find('#btn').text('lol');
    });
    </script>

</body>
</html>

在加载frame.html的 javascript 可以api通过访问对象parent.api。

是否可以将 api 对象添加到 frame.html 窗口，以便可以通过window.api那里访问？（而不是parent.api）（考虑相同的起源和不同的起源）？

上面的代码确实有效（例如#button更改背景和标签），但我认为这是因为所有这些文件都在我的电脑上（同源）。我对吗？

4

1 回答 1

1

假设您没有遇到相同的来源策略

var frame = document.getElementById('frame'); // get the frame
frame.addEventListener('load', function () { // only access when loaded
    var win = frame.contentWindow; // get reference to iframe's `window`
    win['foo'] = 'bar'; // set global (within iframe)
});
frame.src = 'frame.html'; // load up page in iframe

如果内容位于不同的域中，则即使设置了 CORS ，也不能保证您能够访问<iframe>的窗口。

函数和作用域的工作方式意味着它们在正确的上下文中更难做，你必须要么使它们通用，所以它不关心或使用new win.Function

于 2013-07-09T18:42:11.280 回答