Make sure parent iFrame has already loaded jQuery

Question

I am trying to create an iframe login widget that can be used on a customers website. This iframe will use jQuery, but at first I won’t be able to check if the jQuery source document is loaded, if not, download it.

I tried several different methods, but none of them work, or decided to download the jQuery library twice.

Any help would be greatly appreciated.

This code block is inside a page loaded inside an iframe that refuses to cooperate.

<script> var jQOutput = false; function initjQuery() { if (typeof(jQuery) == 'undefined'){ if (!jQOutput){ jQOutput = true; var jScript = document.createElement('script'); jScript.setAttribute("type", "text/javascript"); jScript.setAttribute("src", "js/libs/jquery/jquery-min.js"); } setTimeout("initjQuery()", 50); } else { $(function() { $("#email").css({"background":"red"}); //visual aid to see if jQuery is loaded. }); } } </script> 

I just want to check and see if the parent has loaded jQuery in the iframe, and if not, download it yourself, since I will use it to perform several tasks necessary to complete the login procedure.

Answer 1

Proposed Comment:

I don’t think that what you want to archive is probably due to the same origin policy (cross-domain access via JavaScript) - look at it on Google ... http://google.com/search?q=same+ origin + policy

---

If you, on the other hand, do not violate the same origin policy, you can archive what you want using something like this:

 var parent = window.parent; // This refers to parent window object if ( parent && parent.jQuery ) { // Check to see if parent and parent.jQuery is truly window.jQuery = parent.jQuery; window.$ = parent.jQuery; } else { // load jQuery here } 

Answer 2

The JavaScript code of your widget should be divided into two parts. One of them will be uploaded to the client site. He will have permissions to access the DOM of the site: if necessary, download jQuery, create an iframe, etc. (Be especially careful with global variables there! Try not to use them at all, as they may conflict with the site code.) Note that this part will not have access to the DOM iframe. This is why you need the second part to be loaded inside the iframe. You can use cross-domain methods so that the parts exchange messages with each other. I would advise you to check out the easyXDM library .