父母和iframes之间的jQuery共享（sashit.js）

这个插件有助于在父页面及其iFrame之间共享jQuery。 至关重要的是，iframe内容必须起源于同一域。否则，插件将故障。下载链接

/*!
 * jQuery iFrame Inheritance
 *
 * Copyright (c) 2009 Eric Garside (http://eric.garside.name)
 * Dual licensed under:
 *      MIT: http://www.opensource.org/licenses/mit-license.php
 *      GPLv3: http://www.opensource.org/licenses/gpl-3.0.html
 */
(function($) {

    // Global function for iFrame access via `parent.inherit()`
    this.inherit = function(child) {
        // Inject jQuery into the iFrame's DOM
        child.jQueryInherit = this.parent.jQuery;

        // Custom ready callback for iFrame scope
        child.jQueryInherit.fn.ready = function(fn) {
            child.jQueryInherit.hooks.bindReady();
            if (child.jQueryInherit.hooks.isReady)
                fn.call(child.document, child.jQueryInherit);
            else
                child.jQueryInherit.hooks.readyList.push(fn);
            return this;
        };

        // Namespace for iFrame hooks (document.ready, etc.)
        child.jQueryInherit.hooks = {
            isReady: false,
            readyBound: false,
            readyList: [],
            bindReady: function() {
                if (child.jQueryInherit.hooks.readyBound) return;
                child.jQueryInherit.hooks.readyBound = true;

                // DOMContentLoaded support (Mozilla, Opera, WebKit)
                if (child.document.addEventListener) {
                    child.document.addEventListener("DOMContentLoaded", function() {
                        child.document.removeEventListener("DOMContentLoaded", arguments.callee, false);
                        child.jQueryInherit.hooks.ready();
                    }, false);
                } else if (child.document.attachEvent) { // IE support
                    child.document.attachEvent("onreadystatechange", function() {
                        if (child.document.readyState === "complete") {
                            child.document.detachEvent("onreadystatechange", arguments.callee);
                            child.jQueryInherit.hooks.ready();
                        }
                    });
                    if (child.document.documentElement.doScroll && child == child.top) (function() {
                        if (child.jQueryInherit.hooks.isReady) return;
                        try {
                            child.document.documentElement.doScroll("left");
                        } catch (error) {
                            setTimeout(arguments.callee, 0);
                            return;
                        }
                        child.jQueryInherit.hooks.ready();
                    })();
                }
                jQuery.event.add(child, "load", child.jQueryInherit.hooks.ready);
            },
            ready: function() {
                if (!child.jQueryInherit.hooks.isReady) {
                    child.jQueryInherit.hooks.isReady = true;
                    if (child.jQueryInherit.hooks.readyList) {
                        jQuery.each(child.jQueryInherit.hooks.readyList, function() {
                            this.call(child.document, child.jQueryInherit);
                        });
                        child.jQueryInherit.hooks.readyList = null;
                    }
                    jQuery(child.document).triggerHandler('ready');
                }
            }
        };

        // Return a customized jQuery object for the iFrame
        return child.jQuery = child.$ = function(selector, context) {
            if (selector.constructor.toString().match(/Function/) != null)
                return child.jQueryInherit.fn.ready(selector);
            else
                return child.jQueryInherit.fn.init(selector || this.document, context || this.document);
        };
    };

})(jQuery);

/******* Inside the Child Element *******
 *  Call `parent.inherit(window)` in the iFrame's head to initialize jQuery.
 */
parent.inherit(window);

// Example: document.ready in the iFrame
parent.inherit(window)(function() {
    alert(jQuery('.someElementInTheiFrameDom').text());
});

常见问题（常见问题解答）：jquery，iframes和sharstitance

本节解决了有关iframe和跨框架通信中有关jQuery使用的常见问题。

• > iframe javaScript继承：>

  >从其父母那里继承javascript。 该插件为jQuery提供了解决方法。

• >数据共享（parent/iframe）：postMessage是安全跨域通信的推荐方法。 通过contentWindow的直接访问仅适用于同域iframes。

• > iframe css继承：iframes do

  从其父母那里继承CSS。 样式必须包含在iFrame的HTML中，或通过JavaScript动态应用。

• >contentWindow属性：此属性引用iframe的窗口对象，启用JavaScript交互（仅相同域）。

  >

• postMessage方法：这允许Windows之间的安全交叉启示消息。

• > 相同的原始策略：限制跨域访问iframe内容的关键安全机制。

• 在iframes中：

  jQuery：> jQuery必须在>中包括> iframe的html。

• >

  >访问iframe content（jquery）：允许访问（仅相同域）。.contents()

• > iframes中的ajax： ajax可以加载内容，但需要在iframe中创建新文档并插入数据。>

  >
>动态iframe creation（javaScript）：

• >用于动态创建iframes。 document.createElement('iframe')

  这个修订后的响应可维护原始信息，同时提高清晰度，结构和可读性。 该代码还格式化以提供更好的视觉呈现。
>

以上是父母和iframes之间的jQuery共享（sashit.js）的详细内容。更多信息请关注PHP中文网其他相关文章！