inherit.js - jQuery Sharing between Parents and iFrames


/ Published in: jQuery
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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. });

URL: http://eric.garside.name/inherit

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.