Question

对于上下文，我正在为我的网站设计一个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问题，因此需要牢记这一点。您必须记住，不会添加任何脚本或包含内容，因此，为了获得最佳体验，请在运行此页面之前将其托管在加载所有脚本和包含内容的页面上。您可以看到一个超级基本的示例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和井号之间的空格很重要，请不要忘记它。

Answer 2

我认为不同来源的站点之间不可能做到这一点。提出的方法的主要问题不是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中加载的页面仅隐藏导航栏。

从其他域操作iframe

2 个答案: