perkongsian jQuery antara ibu bapa dan iframes (warisan.js)

Plugin ini memudahkan perkongsian jQuery antara halaman induk dan iframenya. Secara kritis, kandungan iframe mesti berasal dari domain yang sama; Jika tidak, plugin akan rosak. Muat turun pautan

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

Soalan Lazim (Soalan Lazim): JQuery, iframes, dan Warisan

Bahagian ini menangani soalan umum mengenai penggunaan jQuery dalam iframes dan komunikasi kerangka.

• iframe javascript warisan: iframes do not mewarisi JavaScript dari ibu bapa mereka. Plugin ini menyediakan penyelesaian untuk jQuery secara khusus.

• Perkongsian data (ibu bapa/iframe): adalah kaedah yang disyorkan untuk komunikasi silang domain yang selamat. Akses langsung melalui postMessage hanya mungkin untuk iframes domain yang sama. contentWindow

• iframe css warisan: iframes tidak tidak mewarisi css dari ibu bapa mereka. Gaya mesti dimasukkan ke dalam HTML iframe atau digunakan secara dinamik melalui JavaScript.

• Harta: contentWindow Harta ini merujuk objek tetingkap iframe, membolehkan interaksi JavaScript (sama-sama).

• Kaedah: postMessage Ini membolehkan pemesejan silang asal yang selamat antara Windows.

• Dasar yang sama-asal: Mekanisme keselamatan penting yang menyekat akses silang domain ke kandungan iframe.

• jQuery in iframes: jQuery mesti dimasukkan dalam html iframe.

• Mengakses kandungan iframe (jQuery): Kaedah membolehkan akses (sama-sama domain). .contents()

• ajax dalam iframes: ajax boleh memuat kandungan, tetapi memerlukan membuat dokumen baru dalam iframe dan memasukkan data.

• penciptaan iframe dinamik (JavaScript): digunakan untuk membuat iframes secara dinamik. document.createElement('iframe')

Sambutan yang disemak ini mengekalkan maklumat asal sambil meningkatkan kejelasan, struktur, dan kebolehbacaan. Kod ini juga diformat untuk persembahan visual yang lebih baik.

Atas ialah kandungan terperinci perkongsian jQuery antara ibu bapa dan iframes (warisan.js). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!