How to access frames within a frame? - javascript

<iframe name="aa">
<iframe name="bb">
</iframe>
<iframe name="cc">
</iframe>
</iframe>
(assume that iframes shown above have all the required attributes.)
Can I get subframes of frame with name="aa" in native javascript?Browser renders them all, no problem.
I was trying frame.frames to get the array of inner frames, where frame is frame object for outer frame i.e, "aa". But it is not working.
Is it even possible ?
Any help ???
Many thanks.

You can do this, however as each iframe is technically loading another page, you would have to code it into the actual webpage that your first iframe is loading.
To further explain...
<iframe name"aa"></iframe> <!-- this is coded into the first page calling the page below //-->
<iframe name="bb"></iframe> <!-- coded into the second page calling another page //-->
<iframe name="cc"></iframe> <!-- coded into the second page calling anothe page //-->
Remember, iframes are just "windows" into other pages.

Related

Get browser URL from two level depth iframe

There is an iframe in an other iframe. I would like to get the browser's URL (in example: http://test) from the second iframe.
//browser URL: http://test <-- I need this URL
<iframe src="http://level1">
<iframe src="http://level2">
<!-- some content -->
</iframe>
</iframe>
I tried document.referrer but it gives back the first iframe's URL:
<iframe src="http://level1">
<iframe src="http://level2">
console.log(document.referrer); //It gives back http://level1
</iframe>
</iframe>
UPDATE:
The top.location.href doesn't work because there are different domains. Different the browser, the first and the second iframe domain. (our website - adserver - third-party website)
As said it is in general not possible from cross-domain iframes, but in the case of Chrome you can use window.location.ancestorOrigins that will give you the "top level url" and a list of all the domains if you are in several iframes no matter if they are cross-domain or not.

Detect if an iframe is loaded with JavaScript (including those that fail from Cross origin)

I have an url viewer in my webpage that uses iframes and I would like to detect when the iframe is loaded. I don't need to know if the iframe fails to load. What I want is knowing when it is really loaded.
I have tried with:
$(iframe).on('load', ...)
but it gets triggered even when the browser throws a "Refused to display ...":
// example
<iframe src="http://google.com"></iframe>).
so I thought I could check if the document is empty or not using iframe.contentDocument but it seems that it isn't always accessible:
// example with a youtube link
<iframe width="854" height="480" src="https://www.youtube.com/embed/-7EVT6IyFxk" frameborder="0" allowfullscreen></iframe>
Any ideas ?

Adjust height of iframe when new content is loaded

I have an iFrame that is included in my HTML and is available when the page loads. When the page first loads, the iFrame has no content/src. I am using jQuery to insert content into the iFrame dynamically. When a user clicks a link on my page, the contents of the iFrame are updated. All of this is working for me.
However, I am struggling to adjust the height of the iFrame when new content is loaded. I have tried several solutions on Stack Overflow but with no success. Here is my iFrame code:
<iframe id="myframe" width="100%" frameborder="0"></iframe>
Here is my jQuery that changes the HTML inside of my iFrame:
emailOpened.find('#myframe').contents().find('body').html(email.body);
This works for me. I just need my iFrame to adjust its height based on the height of the content being injected. I have failed on all attempts with this part.
Update
Here is my new HTML:
<iframe id="myframe" width="100%" frameborder="0">
<body onload="parent.resizeIframe(document.body.scrollHeight);">
</iframe>
If you need mobile support and allow (user) scrolling for the iframe check out https://github.com/davidjbradshaw/iframe-resizer a as drop-in solution which fixes different issues on iOS and android.
how to properly display an iFrame in mobile safari
https://encrypted.google.com/search?q=iframe+resize+ios+issue
I had to support mobile devices as well and ended up using it after some hours of research and testing. I've also used the provided message channel to send messages to the inner document back and forth.
Call this function directly after the html has been changed.
function resizeIframe() {
var newHeight = document.getElementById('myframe').contentDocument.body.scrollHeight;
document.getElementById('myframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

Disable script execution within iframe

I have a iframe which contains html.
But when the html contains scripts, the iframe executes it.
Is there a way to prevent it?
just enable sandbox is simple way to start with.
<iframe src="http://www.cnn.com" width="600" height="600" sandbox=""></iframe>
http://www.w3schools.com/tags/att_iframe_sandbox.asp

Cross Browser Automatically Click Link On Page Load with Javascript

I have a simple html page with an iframe image link. After the page loads I want the link to be clicked automatically. I need the link to be clicked instead of doing a meta refresh so thats out of the question. I searched around and It seems like FireFox does not support any methods to do so...There has to be a cross browser solution. Here is what I have so far but it wont work...why?
<script type="text/javascript">
window.onload=functionName;
$(document).ready(function(){
$('#clicked').trigger('click')
});
</script>
<div id="clicked">
<iframe src="http://mysource.com" width="40" height="10" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</div>
Add # before the id value
$('clicked').trigger('click');
to
$('#clicked').trigger('click')
If the iframe is on your domain then you can access its contents via jquery selectors.
Otherwise you're out of luck - blocking cross domain iframe interactions is a feature of same-origin policy that exists to protect users.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting

Categories