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.
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 require to find the DOM element which is adding inside of a iframe, with the iframe added. for determine to find the element added, I am using this plugin
all i doing from chrome ext.
arrive.js
body>iframe1>iframe.ssueContentIframe2>#SmartReportTabContent1>loopElements>link
like this:
document.arrive(".ssueContentIframe", function() {
console.log('.ssueContentIframe arrived', this);//works
this.arrive('#SmartReportTabContent1', function(){
console.log('arrive 2');//not working
});
});
what is wrong here? any one help me please?
To check for an element within an iframe you need to include the arrive.js library and your script that calls the arrive() function within the iframe.
If you just want to detect whether iframe is loaded there's other solutions, but if you want to muck around in the iframe you have to keep in mind cross-domain policies.
Javascript has a Same-Origin policy in which javascript on the outer page cannot access the contentWindow or DOM (or global state) of the iframe page if it does not share the Same-Origin
-- T. Stone
Seems to me arrive.js isn't the problem, it's trying to mess with an iframe.
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 );
};
I want to add a script that applies to a DOM object of a certain type right after it is loaded/rendered. This type of object always comes together with the javascript script, and I want to put them together within some tag. Is it right to do it as below? If so, I suspect span is not the best tag to be used here because it may interact with the way the element inside will be displayed. What tag should I use?
<span>
<div>the dom object to be modified by the script</div>
<script>theJavascriptFunctionThatModifiesTheDomObject()</script>
</span>
I doubt this is the best way to load your script just after a particular element has been loaded by DOM due to these reasons:-
It makes your page load slower.
User will see your complete page in a discrete way.
Instead you should do this:-
Specify a selector to your element.
Include your single javascript code at the end of body.
Update DOM elements using that script.
EDIT:
Solution1: Append your JS at the end of body so that it has access to all the DOM elements.
Since you are injecting the element in DOM using ajax, you can define a success handler for XHR object which will modify your element in DOM.
Solution2: You can define a separate method in your JS and bind this method on some event. In your HTML markup define a data-event attribute and in your success handler append the element to DOM, extract the data-event using jquery data method and trigger that event.
Atleast it will keep you markup far away from scripting logic.
Some useful Links:
Best practices for speeding up your website - yahoo
Why we should load scripts at end - SO Link
The problem here is the script tag does not know where it is located in the DOM. It would be better to do something like add a class to the element[s] you want to alter. On DOM ready, you look up the element[s] and do your magic.
I would avoid this approach; scripts block the page loading
– so if you did this after several dom elements the page would run slow (or not at all if errors were found)
Try using jquery onready - example here : http://api.jquery.com/ready/
And scripts [usually] need to go on the bottom of the page to allow the page to load first
…there are exceptions to this rule such as the well known modernizer script library that needs to go first so it can evaluate the dom as it loads
I have one iframe inside on iframe and with this code i want to change the src of an image
window.top.frames[0].frames[0].document.getElementById("maquina").src = "https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png";
and when i try it it work but i cant see changes in the page, only in code when e read .src
of that element
You cannot manipulate the contents of an iframe from within the parent frame without a global method for accessing the child DOM. There is an answer Here that suits your needs, but I will copy below for reference:
In the child iframe:
parent.childGetElementById = function (id) {return document.getElementById(id);}
parent.childLoaded();
In the parent:
function childLoaded() {var dom = childGetElementById('someid');}
Assuming you actually have access to the child page, I would recommend modifying your design away from the use of iframes.
[Answering the comment]
Well it depends on if you're just using straight HTML, or a scripting language (like PHP). If pure HTML, you can use a server side includes with
<!-- #include virtual="path/to/included/file.html" -->
In PHP, you can include the page like this
require('/real/path/to/included/file.php');
Don't get me wrong, iFrames can be useful in some specific situations (circumventing cross-domain origin policies, oAuth implementations, etc); they are more often abused than correctly used.