JavaScript Interaction between Iframe and Parent On this page, a document in an iframe uses JavaScript to interact with its parent document. First we show how the document in the iframe can get references to the iframe element containing it and to the containing document and its properties and objects. Then we provide an example below which demonstrates how to access variables and invoke functions in the parent document, and reference and modify its elements.

A document in an iframe can obtain a reference to the iframe element containing it through the frameElement property of the window object. The frameElement property provides access to a variety of other properties, including offsetHeight, parentNode, ownerDocument, and much more. You could use it to access any object or property in the containing document. Here are a few examples. // reference to first form in parent document var form = parent. Forms [ 0 ]; // or, using form id instead var form = parent. GetElementById ( 'myForm' ); The parent keyword can also be used to access global variables or invoke functions in the main document from the document inside the iframe, as the example below demonstrates.

Note: These cross-document interactions are only possible if the documents have the. The provides the means of. Demonstrating Access to Parent from Iframe Click the buttons in the iframe below to interact with the containing document as described.

The JavaScript for the example is displayed below the iframe. Enter a Greeting: JavaScript for the Example The JavaScript displayed here is included in the iframed document above to perform the tasks demonstrated.

Additional Help. If your problem isn't covered in this FAQ, your best bet would be to post your question to Stack Overflow. Be sure to tag your question with colorbox and jQuery. Due to the volume of questions, I cannot offer individual support. Windev 18 Crack With Dumpteam Pack. Beginner's Guide. If you are completely new to jQuery plugins, try reading the. Invoking JavaScript code in an iframe from the parent. The iframe is calling a parent window function. If We want call the parent page javascript function.

Code comments provide some explanation.

Very good question. I'm trying to add the functionality of anchors to a website that was developed with Apple's iWeb.

It doesn't have any provision for embedding anchors in a page, and doesn't have any way of allowing the developer to make ad hoc changes to the html. Of course, I could go through the final html and modify the pages, but it's a very messy operation, and if any changes are made in the original source documents, then iWeb will overwrite all the changes that I've made. The workaround is that iWeb does allow you to add 'html snippets.' Essentially, it drops an iframe on the page and you can stick any html that you like in there.

As kludgy as this sounds, it actually works pretty well for many things. However, in this case it adds a lot of complication to what should be a trivial task. So, this is why my script needs to reside in an iframe, even though its sole purpose is to interact with the parent page. Ultimately, the website will have to be redeveloped using better software, but it's not going to happen in the foreseeable future. I checked out the ScrollIntoView() link. Thanks, that's much simpler. Still need to do it from inside an iframe though.

Although this code is having the desired effect, the line above is not doing what you think, in that it is not installing an event handler. The line OptionScroll(); would have the same effect.Could you elaborate? I originally just had a the same as in the code of my first post, but then thought that the window.parent.onload= OptionScroll() would be better. It seems to work about the same in both cases. After some testing, there seem to be some situations where it won't work, and I thought that it may have something to do with the code in the iframe trying to execute before all of the parent page had finished loading. I thought that using an event handler would ensure that nothing would happen until the entire page was finished loading. But as I said, it didn't fix the problem.