這個插件有助於在父頁面及其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()); });
常見問題(常見問題解答):jquery,iframes和sharstitance
本節解決了有關iframe和跨框架通信中有關jQuery使用的常見問題。
> iframe javaScript繼承:
>數據共享(parent/iframe):postMessage
是安全跨域通信的推薦方法。 通過contentWindow
的直接訪問僅適用於同域iframes。
> iframe css繼承:iframes do
從其父母那裡繼承CSS。 樣式必須包含在iFrame的HTML中,或通過JavaScript動態應用。
>contentWindow
屬性:
postMessage
方法:這允許Windows之間的安全交叉啟示消息。
> 相同的原始策略:限制跨域訪問iframe內容的關鍵安全機制。
jQuery:> jQuery必須在>中包括> iframe的html。
>訪問iframe content(jquery):.contents()
> iframes中的ajax:
>用於動態創建iframes。
document.createElement('iframe')
以上是父母和iframes之間的jQuery共享(sashit.js)的詳細內容。更多資訊請關注PHP中文網其他相關文章!