2

对于任何了解它的人来说，这一切都与 WordPress“主题定制器”有关，尽管没有必要回答这个问题。

基本上，我有一个页面（在 PHP 中），其中包含一个左侧的设置“窗格”，这些设置适用于 iframe 的内容，它是屏幕的右侧部分。

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

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

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

根据我的经验，从“父”/容器级别操作 iframe 内的 DOM 是很困难的，我想知道是否有一些我不知道的东西，这绝对是不可能的，或者有一些解决方法？（请注意，原始域是相同的，所以不会有任何跨域 iframe 问题）

4

1 回答 1

2

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

我希望这能帮助你解决问题。但是我现在不能保证它会完美地工作（但我很确定）。

父母的代码

<!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>

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>
于 2013-04-10T14:23:00.267 回答