继承.js-父级和iframe之间的jQuery共享

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了继承.js-父级和iframe之间的jQuery共享相关的知识,希望对你有一定的参考价值。

Used to share between a single instance of jQuery through iFrames. Do note, the iFrame content must originate from the same domain, or this plugin will NOT work as expected.
  1. /*!
  2.  * jQuery iFrame Inheritance
  3.  *
  4.  * Copyright (c) 2009 Eric Garside (http://eric.garside.name)
  5.  * Dual licensed under:
  6.  * MIT: http://www.opensource.org/licenses/mit-license.php
  7.  * GPLv3: http://www.opensource.org/licenses/gpl-3.0.html
  8.  */
  9. (function($){
  10.  
  11. // Create a function in the Global Namespace so we can access
  12. // it from the iFrame by calling parent.inherit()
  13. this.inherit = function(child){
  14. // First, bind a copy of jQuery down into the DOM of the
  15. // iFrame, so we can hook in functionality. Things may get
  16. // a bit confusing here, as we're creating this function in
  17. // the parent, but have to set it up internally to get called
  18. // as if it were in the child.
  19. child.jQueryInherit = this.parent.jQuery;
  20.  
  21. // Bind a special ready callback binding function, to handle the
  22. // scope of responding to the document.ready hook instead of the
  23. // parent's document.ready
  24. child.jQueryInherit.fn.ready = function( fn ) {
  25. // Attach the listeners
  26. child.jQueryInherit.hooks.bindReady();
  27.  
  28. // If the DOM is already ready
  29. if (child.jQueryInherit.hooks.isReady)
  30. // Simply trigger the callback
  31. fn.call( child.document, child.jQueryInherit );
  32.  
  33. // Otherwise, remember it so we can trigger it later
  34. else
  35. child.jQueryInherit.hooks.readyList.push( fn );
  36.  
  37. return this;
  38. }
  39.  
  40. // Create a namespace for hooking some functionality to the
  41. // iFrame, like document.ready decetion and handling
  42. child.jQueryInherit.hooks = {
  43. isReady: false,
  44. readyBound: false,
  45. readyList: [],
  46. // Mimic the readyBind() function in the child, so it can
  47. // set up the listeners for document.ready
  48. bindReady: function(){
  49. if (child.jQueryInherit.hooks.readyBound) return;
  50. child.jQueryInherit.hooks.readyBound = true;
  51.  
  52. // Mozilla, Opera, and webkit nightlies support
  53. if ( child.document.addEventListener ) {
  54. child.document.addEventListener( "DOMContentLoaded", function(){
  55. child.document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
  56. child.jQueryInherit.hooks.ready();
  57. }, false );
  58.  
  59. // For IE
  60. } else if ( child.document.attachEvent ) {
  61. // ensure firing before onload,
  62. // maybe late but safe also for iframes
  63. child.document.attachEvent("onreadystatechange", function(){
  64. if ( child.document.readyState === "complete" ) {
  65. child.document.detachEvent( "onreadystatechange", arguments.callee );
  66. child.jQueryInherit.hooks.ready();
  67. }
  68. });
  69.  
  70. // If IE and not an iframe
  71. // continually check to see if the document is ready
  72. if ( child.document.documentElement.doScroll && child == child.top ) (function(){
  73. if ( child.jQueryInherit.hooks.isReady ) return;
  74.  
  75. try {
  76. // If IE is used, use the trick by Diego Perini
  77. // http://javascript.nwbox.com/IEContentLoaded/
  78. child.document.documentElement.doScroll("left");
  79. } catch( error ) {
  80. setTimeout( arguments.callee, 0 );
  81. return;
  82. }
  83.  
  84. // and execute any waiting functions
  85. child.jQueryInherit.hooks.ready();
  86. })();
  87. }
  88.  
  89. // A fallback to window.onload, that will always work
  90. jQuery.event.add( child, "load", child.jQueryInherit.hooks.ready );
  91. },
  92. // Hook the ready trigger to fire off the hook bindings
  93. ready: function(){
  94. // Make sure the DOM is not already loaded
  95. if ( !child.jQueryInherit.hooks.isReady ) {
  96. // Remember that the DOM is ready
  97. child.jQueryInherit.hooks.isReady = true;
  98.  
  99. // If there are functions bound...
  100. if ( child.jQueryInherit.hooks.readyList ) {
  101. // Execute them all
  102. jQuery.each( child.jQueryInherit.hooks.readyList, function(){
  103. this.call( child.document, child.jQueryInherit );
  104. });
  105.  
  106. // Reset the list of functions
  107. child.jQueryInherit.hooks.readyList = null;
  108. }
  109.  
  110. // Trigger any bound ready events
  111. jQuery(child.document).triggerHandler('ready');
  112. }
  113. }
  114. };
  115.  
  116. return child.jQuery = child.$ = function( selector, context ){
  117. // Test and see if we're handling a shortcut bind
  118. // for the document.ready function. This occurs when
  119. // the selector is a function. Because firefox throws
  120. // xpconnect objects around in iFrames, the standard
  121. // jQuery.isFunction test returns false negatives.
  122. if (selector.constructor.toString().match(/Function/) != null)
  123. return child.jQueryInherit.fn.ready( selector );
  124.  
  125. // Otherwise, just let the jQuery init function handle the rest. Be sure we pass in
  126. // proper context of the child document, or we'll never select anything useful.
  127. else
  128. return child.jQueryInherit.fn.init(selector||this.document, context||this.document);
  129. }
  130. }
  131.  
  132. })(jQuery);
  133.  
  134. /******* Inside the Child Element *******
  135.  * Inside the head of the iFrame Content, you'll need to make a call
  136.  * to the following inheritance function, to set up jQuery for the
  137.  * iFrame. The call returns the iFrame's personal jQuery object, which
  138.  * means it can be used to trigger the document.ready event, helpful
  139.  * for condensing code.
  140.  */
  141. parent.inherit(window);
  142.  
  143. // Example of using the inheritance function as document.ready
  144. parent.inherit(window)(function(){
  145. alert( jQuery('.someElementInTheiFrameDom').text() );
  146. });

以上是关于继承.js-父级和iframe之间的jQuery共享的主要内容,如果未能解决你的问题,请参考以下文章

在 iframe 和父级之间传递 jquery 变量

JQuery Draggable 包含到父级和一些额外的

匹配父级和填充父级之间的区别[重复]

js获取iframe和父级之间元素,方法属,获取iframe的高度自适应iframe高度

如何检查 a href 是不是包含 aria-current。如果为 true,则对父级和兄弟级执行代码。使用 jQuery

在父级从 iframe 访问变量的值