Question

我需要在网站上运行iframe，这些网站会加载JavaScript以允许他们在其网页上使用功能。

iframe需要能够访问父对象，以便它可以显示和隐藏页面上的各种内容。

主要html文件：

<script type="text/javascript">
    var SomeApi = {};
    SomeApi.clickMe = function() {
        //some event
    }
</script>

iframe：

<a href='#' onclick='parent.SomeApi.clickMe();return false;'>Click me</a>

我收到错误：

SecurityError: Permission denied to access property "SomeApi" on cross-origin object

我发送的iframe网址是使用node.js express与以下标题：

app.use((req,res,next)=>{
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

我需要做哪些标头或配置才能获得跨源对象错误并且我可以访问父对象？

代码将始终在与iframe不同的域上运行。

Answer 1

正如Darkrum的评论所指出的，问题不在于XHR的标题。我通过做一些解决方法找出了我需要的解决方案。

IFRAME html：

<iframe id='iframe-id' src='about:blank'></iframe>

我使用ajax加载了iframe的内容，如下所示：

$.ajax({
    url: "http://www.exampledomain.com",
    success: function(data) {
        $("#iframe-id").contents().find('body').html(data);
    }
});

这允许我访问我需要的父对象

<a href='#' onclick='parent.SomeApi.clickMe();return false;'>Click me</a>

我必须这样做，因为我要求内容在iframe中。

从iframe访问父对象（跨域）

1 个答案: