부모와 iframes 간의 jQuery 공유 (inherit.js)

이 플러그인은 부모 페이지와 iframes 간의 jQuery 공유를 용이하게합니다. 결정적으로, iframe 컨텐츠는 동일한 도메인에서 유래해야합니다. 그렇지 않으면 플러그인이 오작동됩니다. 링크를 다운로드하십시오

자주 묻는 질문 (FAQS) : jQuery, iframes 및 Irheritance

이 섹션은 iframes 및 크로스 프레임 커뮤니케이션 내에서 jQuery 사용에 관한 일반적인 질문을 다룹니다.

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

iframe javaScript 상속 : iframes do not javaScript는 부모로부터 JavaScript를 상속합니다. 이 플러그인은 특별히 jQuery를위한 해결 방법을 제공합니다

데이터 공유 (부모/iframe) :

는 보안 크로스 도메인 커뮤니케이션을위한 권장 방법입니다.

를 통한 직접 액세스는 동일한 도메인 iframes에 대해서만 가능합니다.

• iframe css 상속 : iframes do not css는 부모로부터 CSS를 상속합니다. 스타일은 iframe의 HTML에 포함되거나 JavaScript를 통해 동적으로 적용되어야합니다.

• 속성 : 이 속성은 iframe의 창 객체를 참조하여 JavaScript 상호 작용 (동일한 도메인 만)을 가능하게합니다.

  메소드 : postMessage이를 통해 Windows 간의 안전한 크로스 오리핀 메시징이 가능합니다 contentWindow

  동일한 원산지 정책 : Iframe의 내용에 대한 교차 도메인 액세스를 제한하는 중요한 보안 메커니즘.
• iframes의 jQuery : jQuery는 iframe 's html. 내에 포함되어야합니다.

  iframe 컨텐츠 액세스 (jQuery) : 메소드는 액세스를 허용합니다 (동일한 도메인 만). iframes의 ajax : ajax는 컨텐츠를로드 할 수 있지만 iframe 내에 새 문서를 작성하고 데이터를 삽입해야합니다.

  Dynamic Iframe Creation (javaScript) :
는 iframes를 동적으로 생성하는 데 사용됩니다.

• 이 개정 된 응답은 명확성, 구조 및 가독성을 향상시키면서 원래 정보를 유지합니다. 이 코드는 또한 더 나은 시각적 프레젠테이션을 위해 형식화되어 있습니다

위 내용은 부모와 iframes 간의 jQuery 공유 (inherit.js)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!