Question

我的索引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更改背景和标签），但我认为这是因为所有这些文件都在我的电脑上（同一个来源）。我是对的吗？

Answer 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

将变量添加到iframe的全局范围

1 个答案: