I just want to access to the DOM in an iframe.
I can display in the Chrome console to the whole iframe definition with the code below :
$('document').ready(function(){
var toto = window.parent.$("#compare_package")[0];
console.log(toto);
});
But I don't find the solution to access to the '#document' content.
I tried :
var toto = window.parent.$("#compare_package")[0].contentDocument;
or :
var toto = window.parent.$("#compare_package")[0].contentWindow;
But it does not work.
Does anyone can help me ?
Thanks in advance for your help.
it only works in same origin policy
// you iframe
<iframe id="some" src=""></iframe>
// bind after iframe content is loaded
$("#some").contents().find('.item');
Related
Info: I was working on it for so long, I have a webpage that contains an iframe. Inside that iframe i have opened a page (application) from my own site.
Question: I'm trying to get the <div class = "ps-lightbox"> </ div> inside that iframe out of the iframe. but i cant figure it out with jQuery..
I know it sounds confusing. But I hope you understand my explanation.
Does anyone know how to fix this? You could save my day..
Screenshot of the webpage <
You can not access the elements which are not part of iframe document. But if you have iframe of your own website then window.postMessage can do the trick.
Consider below example:
mainPage.html
<html>
<head>
<script type="text/javascript">
window.addEventListener("message", function(evnet){
if(event.type === "GET_SOME_ELEMENT"){
var iframeWindow = document.getElementsById("iframe1")[0].contentWindow;
iframeWindow.postMessage("POST_SOME_ELEMENT", "TARGET_ORIGIN", {element: $(".some-element")}
}
});
<script/>
</head>
<body>
<div class="some-element"/>
<iframe id="iframe1" src="iframePage.html"/>
</body>
</html>
iframePage.html
<html>
<head>
<script type="text/javascript">
if(window.parent){
window.parent.postMessage("GET_SOME_ELEMENT", "TARGET_ORIGIN");
window.addEventListener("message", function(evnet){
if(event.type === "POST_SOME_ELEMENT"){
console.log(event.data.element);
}
});
}
<script/>
</head>
</html>
The exact question is how to do it with pure JavaScript, not with jQuery.
But I always use the solution that can be found in jQuery's source code. It's just one line of native JavaScript.
For me, it's the best, easily readable and even afaik the shortest way to get the content of the iframe.
First get your iframe
var iframe = document.getElementById('id_description_iframe');
// or
var iframe = document.querySelector('#id_description_iframe');
And then use jQuery's solution
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
It works even in the Internet Explorer which does this trick during
the contentWindow property of the iframe object. Most other browsers
use the contentDocument property and that is the reason why we proof
this property first in this OR condition. If it is not set to try
contentWindow.document.
Select elements in iframe
Then you can usually use getElementById() or even querySelectorAll() to select the DOM-Element from the iframeDocument:
if (!iframeDocument) {
throw "iframe couldn't be found in DOM.";
}
var iframeContent = iframeDocument.getElementById('frameBody');
// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');
Call functions in the iframe
Get just the window element from iframe to call some global functions, variables or whole libraries (e.g. jQuery):
var iframeWindow = iframe.contentWindow;
// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');
// or
iframeContent = iframeWindow.$('#frameBody');
// or even use any other global variable
iframeWindow.myVar = window.myVar;
// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);
Note
All this is possible if you observe the same-origin policy.
This might help you
var html = $(".ps-lightbox").contents().find("body").html()
And btw, you can get access to iframe's content only from the same origin due to XSS protection
Make sure your code is inside jQuery ready event.
// This won't work
$("#iframe").contents().find('.ps-lightbox');
// This will work
$(function() {
$("#iframe").contents().find('.ps-lightbox');
})
this is my part of code now i'm using iframe tag and loaded epub on iframe tag
then i don't know how to get all elements inside iframe tag.
jQuery(document).ready(function($) {
var tmp = $('#epub_loader iframe').contents().find('body').html();
alert(tmp);
});
<iframe id="epub_loader" href="test.epub" ></iframe>
`
Assuming both your frames are on the same domain and there is no restriction with Same Domain Policy, you can use the following code from the "parent" frame to get an element in the "child" iframe (in your case body tag).
Pseudo code, you need to actually point to your iframe DOM by id:
var html = document.getElementById('iframe').contentDocument.body.innerHTML;
Notes: In case iframe is on a different domain, you have limited access for browser security reasons.
The thing you need is to wait document will be fully loaded coz you are used iframe,then you should call ....
jQuery(document).ready(function() {
window.onload = function () { //call when iframe is fully loaded
var tmp = $('#epub_loader').contents().find('body').html();
alert(tmp);
};
});
I need to set a URL to iframe dynamically, but when I do so, the iframe is empty.
Here is the iframe's definition:
<html:iframe id="myFrame" width="700px" height="500px"></html:iframe>
And here how I tried to set the URL:
var sRedirectUrl = "http://google.com"; //dynamically defined url
var sIframeId = this.getView().byId(this.createId("myFrame")).getId();
$("#"+sIframeId).attr("src",sRedirectUrl);
Here is jsbin example.
I also tried to do the following:
Definition:
<IconTabFilter id="iframe_container">
</IconTabFilter>
Url set:
var sRedirectUrl = "http://google.com"; //dynamically defined url
this.getView().byId(this.createId("iframe_container")).addContent(
new sap.ui.core.HTML({
content: "<iframe scr=\""+sRedirectUrl+"\" width='700px' height='700px'></iframe>"
})
);
And it doesn't work also.
What am I missing here?
Thank you.
UPDATE
Hard coding a generated link into iframe is working fine:
<html:iframe id="myiframe" src="https://generated_link_to_some_site.com?uniqueId"></html:iframe>
You are doing right, but Google does not allow iFrame, try with test.com in your jsbin instead and it will work : http://jsbin.com/vuqujoxupe/1/edit?html,output
The reason why iframe was empty is very simple - I tried to call the element before it was rendered.
It took me 3 days to realize that. Don't be like me.
I got this problem only on IE (even on most recent versions, like 11). The thing is that I appended an iframe dinamicly to my document in which I'm writing some scripts for later execution. Those scripts must paint an image in the end, the problem is I'm getting anoying margins on IE from the body.
I can't load that using the src, it must be dynamic. So I just thought "lets get access to the iframe and write some style on the body". But when I retrieve the iframe doc like this...
var win = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
... win.document.body or win.document.querySelector("body") returns null (again, in ie 11).
Does anyone know how to get to the body safely?
You can do this way:
<iframe srcdoc="" id="iframe"></iframe>
<script type="text/javascript">
var iframe = document.getElementById("iframe");
iframe.setAttribute("srcdoc", "<style>body{background:red;}</style>");
</script>
Demo: http://output.jsbin.com/kaquwilaka
I could write some css like this:
win.document.open();
win.document.write("<style>body{margin:0;}</style>");
//write other stuff
win.document.close();
This works as doesn't avoid any further writting and also because style can be in the head or in the body.
I have a problem with getting the HTML content of an iframe.
JQuery:
$( document ).ready(function() {
var template_html = $("#get_template_html").contents().find('body').html();
alert(template_html);
});
HTML
<iframe id="get_template_html" src="templates/1.html"></iframe>
This works good in Mozilla Firefox, but in Google Chrome it shows blank alert window.
What could be the reason?
Thanks a lot!
Add onload to your iframe, and call the JS function.
Your JS:
function afterLoading(){
var template_html = $("#get_template_html").contents().find('body').html();
alert(template_html);
}
Your HTML
<iframe id="get_template_html" src="templates/1.html" onload="afterLoading();"></iframe>