JQuery teilen zwischen Eltern und Iframes (inherit.js)

Dieses Plugin ermöglicht die Freigabe zwischen einer übergeordneten Seite und ihren IFrames. Entscheidend ist, dass der Iframe -Inhalt aus derselben Domäne stammen muss. Andernfalls fälscht das Plugin. Laden Sie den Link

herunter

/*!
 * 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());
});

häufig gestellte Fragen (FAQs): JQuery, Iframes und Vererbung

Dieser Abschnitt befasst sich mit häufigen Fragen zur Verwendung von JQuery in IFrames und Cross-Frame-Kommunikation.

• Iframe JavaScript -Erbschaft: Iframes do nicht erben JavaScript von ihrem übergeordneten. Dieses Plugin bietet eine Problemumgehung speziell für JQuery.

• Datenfreigabe (übergeordnet/iframe): postMessage ist die empfohlene Methode für die sichere Kommunikation zwischen Cross-Domänen. Direkter Zugriff über contentWindow ist nur für gleiche Domänen-IFrames möglich.

• iFrame CSS Erbe: iFrames do nicht erben CSS von ihrem Elternteil. Stile müssen in HTML des IFrame über JavaScript enthalten sein oder dynamisch angewendet werden.

• contentWindow Eigenschaft: Diese Eigenschaft bezieht

• Methode: postMessage Dies ermöglicht eine sichere Kreuzung zwischen den Fenstern. .

• gleichorientierte Richtlinie: Ein entscheidender Sicherheitsmechanismus, der den Cross-Domänen-Zugriff auf den Inhalt eines IFRAME einschränkt.

• jQuery in iframes: jQuery muss in in dem iFrame -Html enthalten sein.

• Zugriff auf Iframe-Inhalt (jQuery): Die -Methode erlaubt Zugriff (nur gleichdomäne). .contents()

• ajax in iframes: ajax kann Inhalte laden, erfordert jedoch ein neues Dokument im IFRame und das Einfügen der Daten.

• Dynamische Iframe -Erstellung (JavaScript): wird verwendet, um IFrames dynamisch zu erstellen. document.createElement('iframe')

Diese überarbeitete Antwort behält die ursprünglichen Informationen bei und verbessert die Klarheit, Struktur und Lesbarkeit. Der Code ist auch für eine bessere visuelle Präsentation formatiert.

Das obige ist der detaillierte Inhalt vonJQuery teilen zwischen Eltern und Iframes (inherit.js). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!