両親とiframesの間で共有するjQuery（enternit.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());
});

よくある質問（FAQ）：jquery、iframes、および継承

このセクションでは、iframes内のjQuery使用に関する一般的な質問とクロスフレーム通信について説明します。

• iframe javascript継承：

  iframes donot親からJavaScriptを継承します。 このプラグインは、特にjQueryの回避策を提供します

データ共有（親/iframe）：

• は、安全なクロスドメイン通信の推奨方法です。 同じドメインのiframesでのみ経由の直接アクセスは可能です。 postMessage contentWindow

  iframe css相続：
iframesは、親からcssを継承しません
• スタイルは、IFRAMEのHTMLに含めるか、JavaScriptを介して動的に適用する必要があります。

  プロパティ：

  このプロパティは、iframeのウィンドウオブジェクトを参照し、JavaScriptの相互作用を可能にします（同じドメインのみ）。

• contentWindowメソッド：これにより、Windows間の安全なクロスオリジンメッセージングが可能になります

• 同originポリシー：IFRAMEのコンテンツへのクロスドメインアクセスを制限する重要なセキュリティメカニズム。 postMessage

jquery in iframes：
• jqueryは

  iframeのhtml。

• IFRAMEコンテンツへのアクセス（jQuery）：メソッドはアクセスを許可します（同じドメインのみ）。 iframesの

ajax：
• ajaxはコンテンツを読み込むことができますが、iframe内に新しいドキュメントを作成してデータを挿入する必要があります。

  .contents()動的iframe creation（javascript）：

は、iframesを動的に作成するために使用されます。

• この改訂された応答は、明確さ、構造、読みやすさを改善しながら、元の情報を維持します。 コードは、より良い視覚的なプレゼンテーションのためにフォーマットされています

以上が両親とiframesの間で共有するjQuery（enternit.js）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。