时间戳

首页 > 解决方案 > 从不同的域操作 iframe

javascript - 从不同的域操作 iframe

问题描述

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

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

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

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

我已经看到对同一域内的站点使用 jQuery“加载”功能完成了这项工作。但是，对于该应用程序，我很确定我需要将 iframe 源视为一个单独的域，即使我拥有该站点并且该应用程序旨在访问该站点。

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

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

标签： javascriptjqueryhtmlajaxiframe

解决方案

我不相信这在不同来源的网站之间是可能的。所提出的方法的主要问题不是 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 中加载的页面仅在从我的应用程序中加载时才会隐藏导航栏。

推荐阅读