Javascript:数据可以通过 iframe 双向传递吗? [英] Javascript: Can data be passed bi-directionally through an iframe?

问题描述

对于任何对此有特定了解的人，这都与 WordPress主题定制器"有关，尽管没有必要回答这个问题.

基本上，我有一个页面(在 PHP 中)，其中包含一个左侧窗格"设置，这些设置适用于 iframe 的内容，即屏幕的右侧部分.

从概念上讲，我希望使用 jQuery 可拖动 来制作 CSS background-position 主背景图像的可通过可拖动功能进行调整.我需要在 customize.php 页面上应用 draggable()，将脚本排入队列，然后在 iframe 中操作 DOM.它需要在容器/父级别完成，因为在该级别有一个设置将更新 X 和 Y 坐标并将它们保存在存储在那里的设置中.

我认为我需要的可能是不可能的，但我想知道是否可以使用 javascript 执行以下两者:

1. 获取 iframe 的内容
2. 在iframe中操作DOM，通过draggable()调整背景图片并将background-position坐标存储为数据属性然后将它们保存到相应的设置输入字段.

根据我的经验，从父"/容器级别操作 iframe 内的 DOM 很困难，我想知道是否有我不知道的事情，这绝对是不可能的，或者有一些解决方法?(注意源域是相同的，所以不会出现跨域 iframe 的问题)

解决方案

这里是我的父 iframe 通信测试实现的简化代码.我添加了一些如何使用它的示例.但我必须注意它不在我的实验室部分，我目前没有时间检查它是否完全跨浏览器兼容.但如果不是，则只需要进行一些细微的更改.(编辑在当前的 chrome、ff 和 IE 6-9 中测试)

我希望这能帮助您解决问题.但我现在不能保证它会完美运行(但我很确定).

父代码

<头><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>索引</title><script src="jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">(函数($，窗口，未定义){变量 iframe;//连接器对象将被传递到 iframe 并将用作API"var parentConnector = {_window : window,//对父窗口的引用(不是必需的，但很高兴拥有)$ : $,//可以从 iframe 访问的父级 jQuery 的引用(谨慎使用)//在这里，您将为父级定义API"(您要从 iframe 调用的函数)setElementValue :函数(选择器，值){$(选择器).val(值);}}//这个函数被 iframe 调用以在父级中注册 iframewindow.registerIFrame = function( iframeHelper ) {//如果您在父级中有多个 iframe，您可以更改此处的代码以将它们存储在例如数组或对象中的键iframe = iframeHelper;//在 iframe 中注册父级iframe.registerParent(parentConnector);}$(document).on("click",".slideUp",function(event) {event.preventDefault();/*在 helper 对象上调用一个函数，这是最保存的通信方式，因为可以最大限度地降低混合不同上下文的风险*/iframe.slideUp();/*这种方式至少可以在 chrome 中工作，当前版本带有 jquery，但它中继了 jQuery 实现使用正确的文档.*/iframe.$(".info-from-parent").val("slideUp");/*您永远不应该做的一件事是:iframe.$(".info-from-parent").append($("<div></div>"));你不应该这样做的原因是因为这混合了不同上下文的 DOMElements.这将在某些浏览器中导致意外崩溃/行为(但可以在其他浏览器中工作，或者至少看起来可以工作)*/});//和下滑一样，只是有一些交互示例$(document).on("click",".slideDown",function(event) {event.preventDefault();iframe.slideDown();iframe.$(".info-from-parent").val("slideDown");});})(jQuery, 窗口);<身体><input type="text" class="info-from-iframe"><br><a href="#" class="slideUp">slideUp</a><a href="#" class="slideDown">slideDown</a><br><iframe src="iframe.html"></iframe>

iframe 代码

<头><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>iframe</title><script src="jquery.js" type="text/javascript" charset="utf-8"></script><脚本>(函数($，窗口，未定义){//连接器对象将被传递给父对象并将用作API"var iframeConnector = {_window : window,//对 iframes 窗口的引用(不是必需的，但很高兴拥有)_parent :未定义，$ : $,//对可以从父级访问的 iframes jQuery 的引用(谨慎使用)//这个函数被父级调用，在iframe中注册父级注册父:函数(父){this._parent = 父母；},/* 在这里你将为 iframe 定义你的API"(你想从父级调用的函数)*/向上滑动:函数(){$(".test").slideUp();},向下滑动:函数(){$(".test").slideDown();},setElementValue :函数(选择器，值){$(选择器).val(值);}};//在父级中注册 iframewindow.parent.registerIFrame(iframeConnector);$(document).mousemove(function(event) {//使用父级API"调用父级中的函数iframeConnector._parent.setElementValue(".info-from-iframe", event.clientX+", "+event.clientY);});})(jQuery，窗口);<身体><input type="text" class="info-from-parent"><br><div class="test">内嵌框架

For anyone with specific knowledge of it, this all relates to the WordPress "Theme Customizer", though that's not necessary to answer this.

Basically, I have a page (in PHP) which contains a left-side "pane" of settings which apply to the contents of an iframe, which is the right portion of the screen.

Conceptually, I'm looking to use jQuery draggable to make the CSS background-position of the main background image adjustable via the draggable function. I need to apply draggable() on the customize.php page, enqueue the script there, and then manipulate the DOM inside the iframe. It needs to be done at the container/parent level because there is a setting at that level which will update the X and Y coordinates and save them in the settings stored there.

I think what I need might be impossible, but I'm wondering if it's possible with javascript to do both of the following:

1. Get the content of the iframe
2. Manipulate the DOM inside the iframe, adjust the background image via draggable() and store background-position coordinates as a data-attribute and then save them to the appropriate setting input field.

In my experience, manipulating the DOM inside an iframe from the "parent" / container level is difficult and I'm wondering if there's something I don't know, it's definitely impossible, or there is some workaround? (Note that the originating domain is the same, so there would not be any cross-domain iframe issues)

解决方案

Here is a reduced code of my test implementation for parent iframe communication. i added some samples how it could be used. But i have to note that it is out of my labs section, and i currently don't have had the time to check if it is fully cross browser compatible. but if it is not there will only be some minor change that are have to be done. (EDIT tested in current chrome, ff and IE 6-9)

I hope this will help you with you problem. But again i cannot guarantee right now that it will work perfectly (but i'm pretty sure).

code of the parent

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>index</title>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">

    (function($, window, undefined) {

        var iframe;

        // the connector object the will be passed to the iframe and will be used as "API"
        var parentConnector = {
            _window   : window, // a reference to the parents window (not really necessary but nice to have)
            $ : $,              // a reference to the parents jQuery that can be accessed from the iframe (use with caution)

            // here you will define you "API" for the parent (the functions you want to call from the iframe )
            setElementValue : function(selector, value ) {
                $(selector).val(value);
            }

        }

        // this function is called by the iframe to register the iframe in the parent
        window.registerIFrame = function( iframeHelper ) {
            //if you have multible iframe in the parent you could change the code here to store them in e.g. an arrray or with a key in an object
            iframe = iframeHelper;

            // register the parent in the iframe
            iframe.registerParent(parentConnector);
        }



        $(document).on("click",".slideUp",function(event) {
            event.preventDefault();

            /*
            call a function on the helper object, this is the savest way for the commincation because
            there is it minimizes the risk to mix the differnt context
            */
            iframe.slideUp();

            /*
            This way would work at least in chrome, with the current version with jquery, but it relays the jQuery implementation
            that the correct document is used.
            */
            iframe.$(".info-from-parent").val("slideUp");

            /*
            One thing you should NEVER do is the following:

            iframe.$(".info-from-parent").append( $("<div></div>") );

            The reason you should not do this is because this mixes DOMElements of different context.
            This will result in unexpected crashes/bahaviors in some browsers (but could work in others, or at least it will look like it would work)
            */

        });


        // same as the slide down, it is just there to have some interaction sample
        $(document).on("click",".slideDown",function(event) {
            event.preventDefault();
            iframe.slideDown();
            iframe.$(".info-from-parent").val("slideDown");
        });


    })(jQuery, window);

    </script>
</head>
<body>
    <input type="text" class="info-from-iframe"><br>
    <a href="#" class="slideUp">slideUp</a> <a href="#" class="slideDown">slideDown</a><br>
    <iframe src="iframe.html"></iframe>

</body>
</html>

code of the iframe

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>iframe</title>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>

    (function($,window,undefined) {

        //the connector object the will be passed to the parent and will be used as "API"
        var iframeConnector = {

            _window : window,     // a reference to the iframes window (not really necessary but nice to have)
            _parent : undefined,
            $ : $,                // a reference to the iframes jQuery that can be accessed from the parent (use with caution)

            // this function is called by the parent to register the parent in the iframe
            registerParent : function( parent ) {
                this._parent = parent;
            },

            /* here you will define you "API" for the iframe (the functions you want to call from the parent )*/
            slideUp : function() {
                $(".test").slideUp();
            },

            slideDown : function() {

                $(".test").slideDown();
            },

            setElementValue : function(selector, value ) {
                $(selector).val(value);
            }

        };

        // register the iframe in the parent
        window.parent.registerIFrame(iframeConnector); 

        $(document).mousemove(function(event) {
            //use the parents "API" to call a function in the parent
            iframeConnector._parent.setElementValue(".info-from-iframe", event.clientX+", "+event.clientY);
        });

    })(jQuery,window);


    </script>
</head>
<body>
    <input type="text" class="info-from-parent"><br>
    <div class="test">
        iframe
    </div>
</body>
</html>

这篇关于Javascript:数据可以通过 iframe 双向传递吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！