I've got a parent page and an iframe inside that page. The links in the parent control the page that gets loaded in the iframe. What I want to do is refresh the parent page when the iframe gets loaded.
I've got this in the iframe:
RefreshParent(){
parent.location.reload();
}
<body onload="RefreshParent();">
But, the above code refreshes the whole parent page along with the iframe inside it which in turn reloads the parent page and goes into an infinite loop.
You can't refresh the parent page without reloading the iframe.
What you could do is use AJAX to update the parent's content, but that could be a fair amount of work (using the jQuery or Prototype frameworks would make this easier).
You won't need to use ajax techniques either. You can simply call a javascript function in parent page from the page contained in the iframe of parent page. This way you can easily perform actions on parent page. How to refresh parent page partially from page in iframe without affecting the iframe illustrates how.
Hope this helps.
You can't tell the parent window to refresh and exclude any part of its own page, including the iframe contained within it. You can do this using AJAX techniques though.
As long as your on the same domain you can use something like:
window.parent.location = window.parent.location + '?parent-updated=true'
You'll need to have your iframe become a "regular" frame in order to preserve it while refreshing another part of the page. Since the iframe is technically part of the parent (it's an inline frame, after all), refreshing the parent will reload the iframe content as well.
Depends what your layout is, but as other posts have observed you cannot refresh the parent frame without refreshing the iframe itself as it is part of the page.
If you do not wish to use ajax, and layout permits, one solution is to place the contents of the parent frame in an iframe itself. You can then tell the parent page to refresh the iframe containing the 'parent content' when your iframe loads. If your 'parent' iframe is borderless and there is no scrolling then this is all transparent to the user.
You could push this technique as far as a couple of iframes for the parent contents and it can be quicker and simpler to implement than ajax, beyond that you're as well to bite the bullet and implement an ajax solution.
Related
I'm toggling some navigation animation to display and hide particular li elements. I'd like to keep my elements displayed every time the user is on the main screen. I've successfully maintained the nav items displayed on initial load.
Here is a demo:
https://jsfiddle.net/lorenabrito/p9jm59db/22/
If the content is not being interacted with it will redirect to the main page through a .replace()
However, if the nav is hidden and the inactivity condition is triggered, the navigation stays closed on redirect, causing nav duplication. I know the nav duplicates because the main screen page is loading inside the iframe in the main screen.
Ideally, I'd like to overwrite the DOM with the main screen content when the page inactivity redirect is triggered. I momentarily thought perhaps I could set a condition to return when any new content has been loaded in the iframe, but with the replace I'm using the src value doesn’t change. I don't know if I've looked at this too long or if just not possible.
All three pages are using the same domain.
I'm currently console logging every time the iframe loads.
I've found Access child iFrame DOM from parent page the most helpful.
Any input would be greatly appreciated.
//main page with navigation
<iframe id="main" src="http://main-screen.html"></iframe>
//second page
//http://second-screen.html
if (inactivity > 3) // waits 3 mins.
window.location.href = 'http://main-screen.html';
}
//third page
//http://third-screen.html
if (inactivity > 3) // waits 3 mins.
window.location.href = 'http://main-screen.html';
}
My apologies for not posting a demo right away. Thank you!
I was already successfully writing the DOM structure of the window with with the nested iframe. Ultimately, I came to the conclusion during the development of the project that my initial approach was messy. I was seeking to replace that windows DOM with the most recently loaded iframe.
In the end I learned a great deal about iframes!
get parent.location.url - iframe - from child to parent
Access child iFrame DOM from parent page
Is there a way to uniquely identify an iframe that the content script runs in for my Chrome extension?
Normally, html navigation will release the first html page and load another.
But I hope to navigate from one html page to another but keep them in memory both, thus I can apply the document messages.
Is it possible?
Welcome any comment.
Yes and no.
No, you cannot change page and keep the old page in memory.
Yes, you can store the current window.document into a variable and then over-write the entire page with content loaded via AJAX from another page.
This method won't really load the new page though. The url will be the same, the title will be unchanged, really only the DOM will be updated.
You could try to use tabs
http://www.w3.org/Style/Examples/007/target.en.html#tab1
Putting your contentent for each page in a separate tab div and play with the formatting / navigation to simulate moving between pages to make it look to the user they are navigating pages but are really tabbing through a single page.
if you want to use messages (onmessage, postMessage), you can do that with frames, iframes to be specific. One parent window with two iframe windows and they can talk to each other (also over different domains, so the Same Origin Policy doesn't apply) utilizing onmessege and postMessege. If the two iframes dont load a page from the same domain, you will not be able to access the window/DOM
I am creating content that will be loaded in an iframe by another site.
Certain links on the (iframed) page load content via Ajax and then show/hide it using the slideToggle (jQuery animation) function.
I found Resizing an iframe based on content great help in assigning the iFrame the correct height on page-load, but how can I increase the iFrame's height as the content changes dynamically (without reloading a page)?
You can't interact with a different domain's DOM in the means of JS from inside the iframe changing the properties of the iframe itself. Or otherwise, JS from the main document, inspecting/altering the DOM from inside.
You'd be better off loading the iframe's contents per AJAX as well.
First of all I'd like to thanks in advance for your answers on this.
Currently I'm working on a site where I have a page that contains an <iframe>.
The page within the <iframe> has the Tinybox call to open the modal popup (that I want to overlay over the parent page), but the overlay stays within the <iframe>.
Is there a way to load the overlay over the parent page? If so, how do I do it?
Use this functinality in your code
window.top
For the moment, I'll just keep the script in a separate file and include that on every page.
I currently have two html pages, a server hosted page, and a client hosted page, both on the same domain.
The server page, has an iframe sourcing the client page.
I want the parent page iframe to resize based on the child pages content. To accomplish this I have a bit of javascript that sits on both pages. The client(child) page determines it's dimensions, then invokes a function defined on the parent page which resizes the iframe (it's very possible to have this same script sit only on the parent page to accomplish this...).
Is it possible for the client page to directly resize the iframe of the parent without invoking parent script?
As we are the owner of the client page, if we can isolate this code to the child page, it makes having to change any code much less painful.
Yes; you can use the window.frameElement property in the child page to get the <iframe> element in the parent page that hosts the child page.
Thus, you can move the resizing code from the parent page to the child page and resize window.frameElement.