从其他域操作iframe [英] manipulate iframe from a different domain

问题描述

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

For context, I am designing an Ionic mobile app for my website. However, I don't believe that this question is limited to the Ionic framework.

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

Within my app, I want to display a full-width, full-height iframe loading one of the pages from my website. This is straightforward enough:

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

但是，我现在希望能够从iframe中修剪"或隐藏"内容(类似于

However, I now want to be able to "trim" or "hide" content from the iframe (something similar to this example). In one iframe, I want to trim out just the navbar (a particular named div). In another iframe, I actually want to trim out everything that is NOT within a particular named div within the page.

我已经看到对同一个域内的站点使用jQuery加载"功能可以做到这一点.但是，即使我拥有该网站并且该应用程序旨在访问该网站，我也很肯定使用该应用程序将iframe源视为一个单独的域.

I have seen this done using the jQuery "load" function for sites within the same domain. However, with the app I am pretty sure I need to treat the iframe source as a separate domain, even though I own the site and the app is designed to access the site.

我使用jQuery Ajax在此处看到了一个有希望的答案，但是我需要更多的指针来执行它.

I saw what looked like a promising answer here using jQuery Ajax, but I need some more pointers to execute it.

任何有关如何执行此操作的提示将不胜感激！

Any tips on how to do this would be appreciated!

推荐答案

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

I don't believe this is possible between sites of different origins. The chief problem with the proposed approach is not CORS but cross-site scripting. However, it is possible to use postMessage() to send a message from the parent window to the iframe, executing a javascript code hidden in the iframe source. This javascript can then manipulate the elements within the page.

这是我最终要使用的解决方案:

This is the solution that I ultimately got to work:

父窗口

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中加载的页面仅 隐藏导航栏.

The end product is that the page loaded in the iframe can be displayed in a certain way depending on the command passed from the parent window. For my use, the page loaded in the iframe hides the navigation bars only when loaded from within my app.

这篇关于从其他域操作iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！