从不同的域操作 iframe

Question

就上下文而言，我正在为我的网站设计一个 Ionic 移动应用程序。但是，我不认为这个问题仅限于 Ionic 框架。

在我的应用程序中，我想显示一个全宽、全高的 iframe，从我的网站加载其中一个页面。这很简单：

<iframe id="myFrame" src="https://example.com/" style="height:100%;width:100%"></iframe>

但是，我现在希望能够从 iframe 中“修剪”或“隐藏”内容（类似于 this 示例）。在一个 iframe 中，我只想修剪导航栏（一个特定的命名 div）。在另一个 iframe 中，我实际上想剪掉页面内特定命名 div 内的所有内容。

我已经看到使用 jQuery “加载” 函数对同一域中的站点进行此操作。但是，对于该应用程序，我很确定我需要将 iframe 源视为一个单独的域，即使我拥有该站点并且该应用程序旨在访问该站点。

我使用 jQuery Ajax 看到了看起来很有希望的答案 here，但我需要更多的指针来执行它。

任何关于如何做到这一点的提示将不胜感激！

Answer 1

我认为这在不同来源的网站之间是不可能的。所提出的方法的主要问题不是 CORS，而是跨站点脚本。但是，可以使用postMessage() 将消息从父窗口发送到 iframe，执行隐藏在 iframe 源中的 javascript 代码。然后这个 javascript 可以操作页面中的元素。

这是我最终要工作的解决方案：

父窗口

var frame = document.getElementById('myFrame').contentWindow;

sendMessage = function(e) {
    frame.postMessage('secret command', 'https://endpoint.com');
}

<iframe data-tap-disabled="true" id="myFrame" src="https://endpoint.com/index.php" onload="sendMessage()"></iframe>

子（在 iframe 中加载的页面）包含此脚本：

<script>
window.onload = function() {
    // A function to process messages received by the window.
    function receiveMessage(e) {
        if (e.data == "secret command")
            //put code here to maniuplate page elements however desired
        else
            return;
    }

    // Setup an event listener
    window.addEventListener('message', receiveMessage);
}
</script>

最终的结果是，在 iframe 中加载的页面可以根据从父窗口传递的命令以某种方式显示。对于我的使用，iframe 中加载的页面仅在从我的应用程序中加载时隐藏导航栏。

Answer 2

这绝对是可能的，但是您会遇到 CORS 问题，因此您需要牢记这一点。您必须记住，不会添加任何脚本或包含，因此为了获得最佳体验，请在运行此之前加载所有脚本和包含的页面上托管此内容。你可以看到一个超级基本的例子here 但是你会得到一个 CORS 错误，所以要看到它工作你需要安装 chrome CORS 插件并激活它。

你会看到调用很简单

$('#test').load('https://stackoverflow.com/questions/50955345/manipulate-iframe-from-a-different-domain #question'); 

使用#标签表示要加载的内容的id。因此，如果您想加载 id 为“MySuperCoolAndInterestingDiv”的 div，只需在 URL 末尾添加“#MySuperCoolAndInterestingDiv”，URL 和主题标签之间的空格很重要，不要忘记。