JQUERY Partage entre les parents et les iframes (INHERIT.JS)

Ce plugin facilite le partage de jQuery entre une page parent et ses iframes. Surtout, le contenu IFRAME doit provenir du même domaine; Sinon, le plugin se fonctionnera. Télécharger le lien

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

Questions fréquemment posées (FAQ): jQuery, iframes et héritage

Cette section aborde les questions courantes concernant l'utilisation de jQuery dans les iframes et la communication croisée.

• Iframe JavaScript Inheritance: iframes do pas hériter javascript de leur parent. Ce plugin fournit une solution de contournement pour jQuery spécifiquement.

• Partage de données (parent / iframe): postMessage est la méthode recommandée pour la communication inter-domaine sécurisée. L'accès direct via contentWindow n'est possible que pour les iframes du même domaine.

• Iframe CSS Héritage: iframes do pas Hériter CSS de leur parent. Les styles doivent être inclus dans le HTML de l'IFRAME ou appliqué dynamiquement via JavaScript.

• contentWindow Propriété: Cette propriété fait référence à l'objet Window de l'Iframe, permettant une interaction JavaScript (même domaine uniquement).

• postMessage Méthode: Cela permet une messagerie inter-originaux sécurisée entre Windows.

• Politique d'origine homosexuelle: Un mécanisme de sécurité crucial restreignant l'accès croisé au contenu d'un iframe.

• jQuery dans iframes: jQuery doit être inclus dans le html de l'Iframe

• Accès au contenu iframe (jQuery): La méthode .contents() permet d'accès (même domaine uniquement).

• ajax dans iframes: ajax peut charger du contenu, mais nécessite de créer un nouveau document dans le nom iframe et d'insérer les données.

• La création de iframe dynamique (javascript): document.createElement('iframe') est utilisée pour créer des iframes dynamiquement.

Cette réponse révisée maintient les informations originales tout en améliorant la clarté, la structure et la lisibilité. Le code est également formaté pour une meilleure présentation visuelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!