Posted By

garside on 05/29/09


Tagged

iframe object jquery events Shared child sharing Parent


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

gtalmes
sarfraznawaz2005
fadlee


inherit.js - jQuery Sharing between Parents and iFrames


 / Published in: jQuery
 

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

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. });

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: emdadgar2 on July 18, 2010

Thanks, but how to inherit plugins?

Posted By: dashood on November 13, 2010

Thanks this is a really useful method! In a page (not developed by me!) there are multiple iFrames loaded (25 per page!) and the jQuery library needs to be in each, needless to say this is more bandwidth than anyone would be willing to donate (minified JQ = 70KB x 25 = 1750KB per page!) so obviously I would rather just inherit the jQ lib on the parent. This part has worked, the alert shows the text of an element within the iFrame no problem.

However, I am trying to use a plugin in the iFrame, but it's not working. The markup is as follows

parent.inherit(window)(function(){
    //alert( jQuery('.vehicletitle').text() );
    $("li").ellipsis();
});

Have I missed something in the set up of this? The targeted "li" elements all live within the iFrame. The jQ lib and inheritance script are all on the parent page and the alert works fine, but it won't allow me to use my plugin! Can someone please help?!?

Posted By: dashood on November 13, 2010

^ meh, it parsed out my script tags that show it loading the plugin .js. As psudo code it kinda looks like this;

html head script: jQ library (minified) script: inheritance script (as found above) /head body iFrame (my document) html head script: (load my plugin) parent.inherit(window) $(li).ellipsis /head /html /iFrame /body /html

would the above work?

Posted By: dashood on November 15, 2010

^ meh, it parsed out my script tags that show it loading the plugin .js. As psudo code it kinda looks like this;

html head script: jQ library (minified) script: inheritance script (as found above) /head body iFrame (my document) html head script: (load my plugin) parent.inherit(window) $(li).ellipsis /head /html /iFrame /body /html

would the above work?

You need to login to post a comment.