I'm working on a code playground type of web app. On each page there are upto 6 iframes containing results of whatever HTML/JS/CSS code a user creates/plays with.
I want to make jQuery available inside the head of each iframe as default.
Note that jQuery is available in the of the parent window so I was thinking if there could be a way to avoid six independent requests being fired from each of the iframe [heads] for the same script?
The only way to make jQuery available with a unique and consistent state that belongs solely to the iframe is to include the <script> tag that points to the jQuery script in each frame or dynamically load the script from each frame. This will reinitialize the jQuery state separately for the frame. There is no other way to get a new instance of jQuery for the iframe.
The browser will have the script in its cache after the first one so it won't be reloaded over the web each time.
You can do this:
When you create the iframe's content, you add the following code (or altered to use the "$"):
<!-- This goes in the "head" tag -->
<script type="text/javascript">
//We're creating jQuery
var jQuery = window.parent.jQueryLoader.getJQuery();
</script>
In your parent, you'd have this:
var jQueryLoader {
getJQuery: function() { return JQuery );
};
Related
I'm having a weird bug where load() is breaking my carousel.
I have a Slick Slider with 3 slides. You can click the NEXT button to move to the next slide. You can also click the slide itself and it loads content into the div of a cat and some text using:
$('.frame').load(url);
The bug is that after you view the loaded content and click BACK, the NEXT button no longer works. Somehow it breaks the nav. I've tried show() and hide() but that doesn't help.
Please see my codepen demo
And this is the url I'm loading into that demo if you find that useful.
Thanks for taking the time to help me :)
As I stated in a comment to your question, the reason your Slick Slider plugin stops working after you load the other document is because the other document is re-including the jQuery library into your top-level browsing context.
jQuery plugins make themselves accessible by defining a new method and then attaching it to the jQuery.prototype (aliased as jQuery.fn) object.
When you include the jQuery library into your document via a script tag, you can call console.log(jQuery.fn); and you will see an object with all of the convenient methods that make up the jQuery library.
After you have similarly included the Slick Slider library, you can again call console.log(jQuery.fn); and you can find that it has a method property named slick.
The problem is that when you load the document that resides at url that document is inserting a fresh script tag into your parent document whose src is jQuery. This causes a fresh loading of the jQuery library which obliterates your initial instance. If you call console.log(jQuery.fn.slick); at this point, you will find that it is undefined.
I have never before seen an entire HTML document (as opposed to a snippet of HTML) loaded into a div of another document. This is inserting elements into the body of your top-level document that should not be there, like <head> and <body>. I am actually surprised that this is causing so few issues for you.
The way documents are normally nested within other documents is by the use of an iframe. The document within the iframe will be its own sandbox, and its styles and scripts will not be in conflict with those in the parent frame.
You could implement an iframe into your project by replacing $('.frame').load(url); with something like the following:
var $iframe = $('<iframe />', {
src: url,
style: 'height:100%; width:100%;'
});
$('.frame').html($iframe);
I have jQuery on my main page and would like to clone/copy the main page version of it inside my iframe, so that I can extend that version with specific plugins that are not relevant on the main page.
How can accomplish do this?
No. That's is not cloning process. You require to put the code for your iframe elements separately or in combined logics.
You cannot clone the function for another scope.
Just insert a <script> tag for jquery in the head of the iframe's document. That will provoke the iframe into loading jQuery.
Don't forget that you have to use the jQuery constructor that takes a 2nd parameter specifying the htmlDocument when you create an element in a different document and when you do element queries in a different document.
Here is an example jsfiddle that puts the main document jquery into an iframe.
CORS applies here, if the iframe is not in the same document, it will not let you "reach into" the iframe. If you control the page, you can use postMessage to get around the security barrier.
Does anyone know the best place to add the HTML code for jQuery Mobile pages that have been dynamically generated?
I have been adding them to the end of the <body>, however, this is causing problems with other jQuery mobile pages.
I have tried adding the jQuery Mobile pages into a div at the end of the page, however, their ids are no longer accessible via hrefs.
Link to Code: http://jakeserver.com/Apps/BostonLandmarks/B11/index.html
Any ideas?
I recommend you move all script within the individual page divs to a global script tag and then run that code within a pagecreate event of the page e.g.:
$(document).on('pagecreate','#landmarks', function(){
function setNewActiveTab(newTab){
$(".LandmarksTab").removeClass("ui-btn-active");
$(".LandmarksTab").removeClass("ui-btn-active");
$(".MoreTab").removeClass("ui-btn-active");
$(newTab).addClass("ui-btn-active");
}
assembleRows(landmarksArray);
assembleLandmarkPages(landmarksArray);
determineMapScreen();
});
Here is a working jsFiddle based on your code.
This will ensure that the code runs at the correct time with respect to jQM's page creation/enhancement.
I have a site which pulls pages into a dynamic interface. Currently, the main page requires that any javascript the external pages will need be loaded with the main page. Most javascript the external pages have are objects that are built when the page gets pulled in, but first, which causes issues.
It's a little hard for me to explain for some reason so here's a simple walk through of process.
1.Request a page be pulled in
2.Based on a variable passed to function create a specific object which will be associated with the physical html coming from the page ( This is the external Javascript)
3.Load page into the objects frame
This flow requires that the external javascript be attached to the main page not the page being pulled in.
I want to switch steps 2 and 3, but I assume that I will need a way to know that the page and all its scripts have fully loaded before attempting to create the designated object, but I have no idea how to do that.
I am using jQuery and hope that this can be accomplished without a plugin but if it is needed then so be it.
Thanks
Update
Good questions. So the pages are local pages that we build at this point, so we know what to expect. Also the pages are loaded just into basic div structure.
Specifically the main page makes a request to get a page. That page is returned in the form of a string and is then pasted into a div element that is on the main page. The pages are more like fragments I guess. But they can range from fairly complicated and require a bit of javascript to not using any javascript at all.
And the external javascript would generally be added via a script tag and is not inline.
Due to the dynamic nature of the page we do NOT use IFRAME's, they cause issues with the movement of our modules.
If you're using an iframe then I imagine you are changing it's src attribute. To get an alert on when that iframe is done loading you should include a script on the page within the iframe:
<script>
$(window).load(function() {
alert("All Done");
});
</script>
If you are just requesting a string version of a page via AJAX and populating a div you need some extra JavaScript to detect when those dynamically loaded script files have finished downloading to the client.
I would visit this link to get you started.
A combination of Nick and Mic's solution.
In your IFRAME pages, you need a way to determine when the content is done loading, or ready, and then alert your main page:
<script>
$(function() {
parent.frameReady();
});
</script>
In your main page, you can code in the hook from your IFRAMEs:
<script>
function frameReady() {
// attach custom js to iframe here
}
</script>
I'm trying to run an $.ajax()-call inside of an dynamicly with jQuery generated iframe.
So somehow the jQuery instance needs to get passed into the iframe after it was generated and then then "$.ajax()" must get called... maybe with eval?
So to be clear, not only the iframe should get generated dynamicly, also the content inside the iframe (the JavaScript) should get generated and executed on the fly. And the dynamicly generated JavaScript inside the iframe should be able to use the jQuery instance of the script it was generated by to make use of $.ajax().
Hopefully it's somehow clear what I mean :-)
I'm happy about any suggestions.
I would suggest creating an iframe dynamically and appending using jQuery. Afer that set src to a basic page you have already created that contains:
<script type="text/javascript">
$(document).ready(function() {
$.ajax(...)
});
</script>
That should ensure that the page fires off your ajax request once it's loaded in the iframe.