父母和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中文網其他相關文章！