I have a snippet on www.a.com
<iframe src="www.b.com" id="my-iframe">
#document
<html>
<header>
//some headers go here
</header>
<body>
<div id="my-iframe-div"></div>
</body>
</html>
</iframe>
What I want to achieve is to add one class name on the div inside the iframe
so what I did is
const element = document.getElementById('my-iframe').contentWindow.document.getElementById('my-iframe-div');
if(element) element.classList.add('my-iframe-class')
which would result in cross domain error, because the src attribute is www.b.com, but the page is on www.b.com
How to implement that? thanks
Related
I have some content on my site that can be embeded by other domains. What happens is that my iframes need to have an ID to run some javascript.
This is the iframe code I provide to my users:
<iframe src="http://www.example.com/embed/2854" id="zframe" width="100%" height="460" scrolling="no" frameborder="0"></iframe>
When the users remove the frame ID, my javascript stops working.
Is there a way wo force the iframe to have an ID via javascript?
Bellow is my implementation to try forcing the ID usage on my iframe when users remove the ID from the iframe code I provide:
<html>
<head>
<title></title>
</head>
<body>
<script>
document.getElementByTagName('iframe')[0].setAttribute("id", "zframe");
</script>
</body>
</html>
I found many related questions but none of them had a solution that worked for me, so apologies if this is a dupe.
I have the following HTML structure (simplified) :
<html>
<head>
</head>
<body style="">
<div>
<div>
<div>
<iframe>
<html>
<head></head>
<body>
<div></div>
<iframe>
<html>
<head></head>
<body>
<div>
<iframe src="about:blank">
<html>
<head></head>
<body>
<img />
<iframe id="some_random_id">
<html>
<head></head>
<body>
<div>
<!-- main content -->
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</body>
</html>
And I would like to retrieve all the iframes, ideally in an array.
I have tried the following:
document.getElementsByTagName('iframe')
But that returns an array of size 1 : [iframe]
window.frames.length give me 1
I thought about doing something like :
var a = document.getElementsByTagName('iframe')[0]
var b = a.getElementsByTagName('iframe')[0]
// b is undefined
var b = a.contentDocument.getElementsByTagName('iframe')[0]
// b is undefined
Is there any way to retrieve all iframe on the page? Alternatively, just getting the last one (the one with the id some_random_id) would works as fine, but I can't use the id to select it since the html is created by a third party.
Edit: I don't think my question is a duplicate of using document.getElementsByTagName on a page with iFrames - elements inside the iframe are not being picked up
because the accepted answer in this question use:
for( j=0; j<m; j++) {
...
}
Where m is document.getElementsByTagName('iframe').length. But in my case it would have the value 1 and thus I couldn't access the nested iframes.
You are using the <iframe> tag absolutely wrong! You would like to read the documentation from <iframe> tag:
Permitted content: Fallback content, i.e. content that is normally not rendered, but that browsers not supporting the <iframe> element will render.
In other words the content between <iframe> and </iframe> tags will be rendered, if the browser do not support the <iframe> element.
You have two possibilities to use <iframe> tag:
In the src attribute from <iframe> tag you could write a path to HTML file.
In the src attribute from <iframe> tag you could write "about:blank" and then using JS you could add the content to this <iframe>.
If you want find some elements or manipulate the content from this iframes you could use the following code:
var iframe = document.getElementById('iframeId'),
innerDoc = iframe.contentDocument ? iframe.contentDocument
: iframe.contentWindow.document;
You should be sure that you have an access to your <iframe>.
Please read Cross-origin resource sharing (CORS) article about it.
If you want to get the count of all nested iframes on document you have to find it for each <iframe> separatelly and to add this count to your global iframe count variable. And do not forget about the CORS (see above).
I must check the change of a tag in an iframe in another webpage (with the same domain). I have this index.html:
<html>
<body>
<iframe id="open_app" src="/sign.php" width="800" height="600" frameBorder="0" scrolling="no" ></iframe>
</body>
...
and this is the tag in sign.php that I want check for change:
<div id="status"></div>
Now, I have always used the MutationObserver for check the change of a tag in a webpage but I now I can not do the same to test the iframe tag with the id status. I've already seen all the related discussions on Stackoverflow but nothing works. What is the best way to verify the change of the iframe tag with the MutationObserver? Thanks.
I am trying to get the first paragraph from the website below and display it in an iframe.
Can you correct my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
$(iframe).contents().find("<p>").html();
</script>
</head>
<body>
<iframe name="iframe" id="iframe" src="https://www.baronaonlinepoker.com/blog" scrolling="yes" width="180" height="135">
</iframe>
</body>
</html>
You'd be better to use a DIV and use XMLHTTPRequest to set the innerHTML
If the browser loads a page from x.com, that page can have a frame whose source is y.com, but the x.com code will not have access to the y.com DOM. This is a cross-domain issue. You can read more here: http://en.wikipedia.org/wiki/Same-origin_policy
Please see my answer here: https://stackoverflow.com/a/19100553/98706
because I think your going about achieving something the wrong way.
I have this simple html page I wish it to scroll automatically to bottom the iframe however the codesimply does not work, it does not scroll down the iframe automatically,
anyone knows whats wrong with it?
<html>
<head>
<script type="text/javascript">
function showLog() {
el = document.getElementById("log")
el.innerHTML='<iframe id="myLogFrame" name="mylog" onload="this.contentWindow.document.documentElement.scrollTop=100" src="http://yahoo.com" width="100%" height="50%" align="middle" scrolling="yes" frameborder="0"></iframe>'
el.scrollTop=el.scrollHeight
}
</script>
</head>
<body onload="showLog()"/>
test1
<div id="log" style="width:100%">
</div></body></html>
Sadly, what you're trying to do is impossible due to the Same Origin Policy which restricts any and all access to documents that are not on your domain.
Your only chance is if the remote page has an anchor to the bottom of the page. If it does, you can link to that anchor. The browser will jump there.
<iframe src="http://yahoo.com#name_of_bottom_anchor">
If your iframe is linked to another domain, web browser will blobk you access iframe's document, so you can access iframes scrollTop.