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.
Related
I have been searching for this for days and was wondering if anyone could help me with the answer to this.
So, I am currently building a system which allows users to create html pages which can include css and js links and possibly inline scripts/styles within it.
I want the user to preview their output, i was originally using a div tag and adding the html output to it but as all the extra styles and scripts also affected the parent page, i decided the only option was probably to use an iframe to put the content in.
To stop bootstrap links and Jquery conflicts to the parent element, i need to run the iframe in a sandbox environment from what i know but i have no idea how to set the content of the iframe when its in sandbox mode.
If you try:-
$("example iframe element").contents().find("body").html("example html inline styles etc");
this does not work and blocks access due to the iframe being sandboxed and not allowing the origin.
Sandboxing an iframe seems to be the only way to stop multiple instances of Jquery "one on the parent and one in the iframe" from conflicting, i did try noConflict which seems to work but that does not fix conflicting multiple bootstraps being loaded in the parent and iframe elements.
does anyone know either how to add content at runtime to a iframe that is sandboxed without getting blocked access or a different unique container approach i can use?
i appreciate any help or guidance anyone could give on this as i cannot really find much information about it.
I have finally found out what the problem is with this situation, i do not need a sandboxed iframe as i now know why Jquery and Bootstrap are conflicting without having to sandbox the iframe. I see lots of posts telling you to use something like the code below to put content in an iframe.
$("example iframe element").contents().find("body").html("example html inline styles etc");
the problem with the method above is that its opening the iframe up for putting content inside it but its not specifying the closing of the iframe.
This is why even on a normal none sandboxed iframe Jquery and Bootstrap conflict because its leaking back into your parent page by not being closed. The real method for putting content into an iframe directly should be the code below as it ensures the connection is closed off appropriately.
var myIframe = document.getElementById("ID OF THE IFRAME")
var iframeDoc = myIframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write("HTML HERE");
iframeDoc.close();
by doing the above code you are not only modifying the content inside the iframe but your also closing it off once you have finished writing the content. This is very important in ensuring Iframes stick to their purpose as being a completely isolated page element and it stops js and css leaks into your parent page.
i hope this answer helps save time for anyone else who comes across this particular problem with iframes and is adding content at run time using the wrong method.
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.
So I am currently working on an application that runs on top of the customers page inside its own iframe.
Application works in backbone and everything else except the initialization of the iframe is done inside the iframe. Initialization happens with a small javascript snippet that the client will copy to their footer.
The problem I'm currently having is that I have to inject a CSS file to the parent site in order to style my iframe correctly when it's rendered and I really don't think that I should tamper with clients page at all since CSS might have some conflicts in it.
Is there any better way to style the iframe than the current way of doing it?
I think you have two different options;
Inline iframe styles
Give your client a pre-styled iframe to embed, like this
<iframe src="yoururl.com/client"
frameborder="0"
style="border: 0; width: 100%; height: 600px;">
</iframe>
Embed through script tag
Create a small script tag (that you host) that you give to your client. Inside the script you dynamically create the iframe dom element and possibly other external css-files that you need
Host a JS file, like //yoururl.com/iframe.js
var iframe = document.createElement("iframe");
iframe.setAttribute("src","http://yoururl.com/client");
document.write("<div id='mycontainer'></div>");
document.getElementById("mycontainer").appendChild(iframe);
Then you can give this to your client to put in their page where they want the iframe to show up.
<script src="//yoururl.com/iframe.js" type="text/javascript"></script>
You can provide your css separately to the client. If that is not an option, then you need to do it the way you are doing now (injecting the parent style from within the iframe). However, this does not seem to be a good idea, unless your css rules are pretty unique.
There are many ways but it could be possible that no one is applicable:
Ask the client to style your iframe (inline or with css)
publish the iframed content on the same domain of the main website and check if the parent frame is accessible via javascript
Ask the Client to enable the header "X-Frame-Options". Maybe with something like "ALLOW-FROM SAMEDOMAIN, www.youriframedomain.com". It seems it is deprecated, check for Content-Security-Policy instead.
embed it via script tag
Check for window.postMessage: it requires anyway an additional script in the main website that listens for the message (it could be the css text itself) from the iframe and applies the new style
You should be able to use window.frameElement to refer to the iframe element which your page is embedded in. With that reference, you should be able to modify the style attribute to change how the frame renders.
So I have an iframe, and I would like to be able to do something like an alert whenever a specific button in the iframe is clicked. But the following code does not work
$('.class_name').click(function(){
alert('Clicked');
});
in fact, it wont even alert when the iframe is clicked (which is the same code as above, but where .class_name becomes iframe).
I looked at the solution from this question, and it still did not work!
This is a jsfiddle that should demonstrate the issue pretty well.
So my question is: Why wont Jquery recognize when anything inside the iframe, as well as the actual iframe, is clicked?
Edit:
I understand that I cannot communicate with an iframe on a different domain, so my jsfiddle wont work...but it doesn't work on the site where I am hosting it on the same domain as the iframe...
If your iframe is coming from a different domain, as in your fiddle, then your JavaScript code has no access to its contents at all, sorry!
As #Max poins out, you can use postMessage() or the URL fragment hack to communicate with an iframe in a different domain, if there is code in that iframe to handle this communication from that side.
With an iframe from tumblr.com, you could check their documentation to see if it talks about using this page in an iframe and communicating with it across the domain barrier.
Now if you're talking about an iframe from the same domain as your page, then it's easy. Given an iframe element in a variable named myframe, you can use myframe.contentWindow to get its window object and myframe.contentWindow.document to get its document object. From there you can do the things you need. For example:
var $myframe = $('#myframe'),
myframe = $myframe[0],
myframewin = myframe.contentWindow,
myframedoc = myframewin.document;
$(myframedoc).find('a').on( 'click', function() {
alert( 'Clicked!' );
});
You may still have some trouble using a copy of jQuery in the main page to access things in the iframe, but should have better luck with the latest versions. Worst case you can use native DOM events and methods for this, but jQuery does work in this updated fiddle.
This fiddle uses document.write to put content in the iframe, but the jQuery code accessing the frame would be the same either way. The one thing to watch out for, of course, is whether the iframe has been completely loaded when you try to access it.
I think you can listen for a load event on the iframe element in the containing page, but worst case you could use setTimeout() or setInterval() and wait for the elements you're looking for to become available.
Because the iFrame is a completely different frame- it's done out of security concerns. For example, imagine if you could load a banks login page in an iFrame, and use js to get the field values.
With different domains especially, it is much harder to communicate with JS- this should get you started: How to communicate between iframe and the parent site?
first i did my research on this topic after reading and applying so many JS i posting this problem,
i am trying to apply iframe in which i get content from some other domain.
i m trying to set the iframe height on the base of scrollheight of the content inside the iframe but failed to do so
i tried to use onload event of iframe but failed...
please help me i need to set the height of iframe dynamically by any mean necessary ..
if the code would be provided in Javascript that would be helpful to me
Thanks in advance
For security reasons, it is not possible to interact with a frame in a different domain.
That includes measuring its content.
#SLaks is correct. If the iframe content is on a different domain you cannot access its contents directly.
What you could do (and what I recently just did) is setup a proxy that pulls the content in via cURL (in php but im sure whatever server side language has something that is the equivalent). The iframe content is then on the same page and you can access the height of it via:
var _iframeHeight = $('#iframe').contents().find('body').height();
$('#iframe').height(_iframeHeight);
Also I forgot to mention (#SLaks thanks for the reminder) You would have to check all the script/style/image tags and check/add an absolute url to it. The proxy can get pretty tricky but it will get it done.
If you are able to alter the content inside the iframe, for example if you are the author or can contact the author of that iframe content, you can setup a double-iframe trick to send the height of the iframe to your main page.
Here is how that can be accomplished:
In your main page (AAA.com/mainpage.htm) you put an iframe (BBB.com/mainframe.htm).
Together with your main page, you create another page (AAA.com/heightproxy.htm)
You make that BBB.com/mainframe.htm would create an invisible iframe with AAA.com/heightproxy.htm inside.
Result: BBB.com/mainframe.htm on it's onload event can load it's iframe AAA.com/heightproxy.htm with some parameters added to URL. For example, it can put it's new height/width there into the parameters. Also, AAA.com/heightproxy.htm can access all JS function in AAA.com/mainpage.htm - as they are in same browser window and share same domain. This way it can redirect the width and height it received to the mainpage.
Disclaimer: This trick is only possible if you can modify the source of the iframe you need to include.
You cannot interact main page from iFrame if content is loaded from different URL (you can measure height from iframe, but cannot pass it to main page).
That can be overridden by loading content via simple proxy script.