Develop Reference

Scroll to top of page after delay (just once) or after an iFrame on page has loaded the first time

I have a parent page containing an iFrame midway down the page (same domain, have access to both). My iFrame tag looks like this:
<iframe name="Survey" onload="parent.location='https://www.example.com/ParentPage#SurveyTop';" scrolling="no" src="https://www.example.com/ChildPage" width="100%" id="iFrameResizer0">
The iFrame can get quite tall, so I have that onload command in the iFrame tag which makes the page automatically back to the top of the iFrame every time the iFrame is refreshed/loaded.
The problem is that it also immediately scrolls down to the top of the iFrame the first time the parent page is loaded, since the contents of the iFrame loads a second or two after the parent page. So the visitor never sees all the important page name/intro/hero image stuff above the iFrame.
Is there some javascript where I can initially have the parent page displayed at the top of the page, but any time the content in the iFrame is refreshed it scrolls to the top of the iFrame like it does now?
I tried putting various methods javascript after the iFrame thinking it would load and scroll to the iFrame, but then scroll back up to the top if the page, but it never worked. For example:
document.body.scrollTop = document.documentElement.scrollTop = 0;
or
window.scrollTo(x-coord, y-coord);
I also tried putting a three second delay on it but it still didn't scroll to the top. (My scripting is terrible). It's not ideal to have the page jump down to the iFrame then back to the top, but it would only happen the first time and it's a compromise I'm willing to have! Thanks!

When you say you "tried putting a three second delay on it", what code did you use? Then in your comment you ask how to create a delay... It isn't clear what method you tried that failed to work. Anyhow, to add a 3 sec delay in Javascript execution, the standard method to use is window.setTimeout(function(){YOURCODE;}, 3000);. As you noted, this would be a compromise, not really the solution you want.
A better approach would be to set an onload handler on the parent window, which would set the onload handler of the iFrame: window.addEventListener("load", function(event) {YOURCODE;}, false);. In your code in the handler you'd reference the iFrame with window.frames["iFrameResizer0"].
Because the iFrame onload handler would be set after the parent page and the iFrame have loaded, the iFrame onload code would only run when the iFrame is reloaded, not on the first load of the parent, solving your problem.

Resize iframe to wrap it's content every time it changes it src

I managed to resize the iframe to wrap its content with this code:
var frameHeight = document.getElementById("fibertjekIframe").contentWindow.document.body.scrollHeight;
$(this).height(frameHeight);
And it works fine the first time page loads, but inside that iframe is a form and when user submits the form, he is redirected to another page within that iframe. I want that iframe to resize based on its content as well.
I was hoping this would work:
// Auto resize of the Fibertjek Iframe
$("#fibertjekIframe").on("load", function () {
var frameHeight = document.getElementById("fibertjekIframe").contentWindow.document.body.scrollHeight;
$(this).height(frameHeight);
});
The function is called every time there is new src loaded inside the iframe but for some reason I am getting the old height of the iframe so it remains the same.
EDIT: I have investigated a little more and I found out that even after form submission (in the iframe) and after the redirection, the src attribute of the iframe remained the same so I assume it is still referring to the old page, even though it has been redirected. The only idea how to overcome this I've got, is to set source of the iframe to the page that I was redirected to after form submit, but that is not convenient and right solution ...

I'd recommend to use the iframe-resizer which does what you want: https://github.com/davidjbradshaw/iframe-resizer

Content of iframe not opening in iframe only

I have a base page in which am using a Iframe of different domain.
Content gets render but if user click on any link rendered inside iframe it get open as normal page.
I want it to be opened in Iframe only.
for information, I can control my base page as well as application hosted on different domain.. which i want to so in iframe.
In simple words whole site that is opened in iframe, user should be able to do his work in iframe only. click on any link inside iframe should not open in browser. so that I can create a central application which can open my application(Existing) in iframe. As well as if user open the application seperatly it can also work.

If you don't have access to the code of the iFrame page you won't have a chance of doing this.
See: https://en.wikipedia.org/wiki/Cross-site_scripting

Technically, you could use .postmessage() to get the child content inside the iframe to send a message to the parent to change the iframe source on button clicks.
Note, this will only work if you have control of the child code getting rendered inside the iframe, which I cannot tell from your question.
Example, in your child site, inside the iframe, it would need code to send to the parent page (outside the iframe) when you click INSIDE the iframe site:
self.parent.postMessage("stringSayingDoSomething", "*");
Then, your parent site has an event listener set up to receive the message and perform an action.. that action can be doing something on the parent side.. or, sending a message back down to the child site to do something instead:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
switch (message) {
case "stringSayingDoSomething":
DoMyFunctionNowThatChildFrameHasToldMeTo();
break;
Here is another question on stack overflow addressing the issue: Communicating cross-origin from parent to child iframe

Event firing when iframe loaded

I'm trying to set up event, which should fire when iframe is loaded. It is important to acknowledge, that I want this event to fire INSIDE iframe, not in parent page. Actually, parent doesn't have to know that iframe was loaded.
On the beggining I've tried $(function() {....} (document.ready) event, but it doesn't seem to work as expected. It seems that it fires when parent page was loaded (the same event on parent page works as expexted).
Then, I've tried window.onLoad = function() {...} but it doesn't seem to work at all (event not fired).
So, how to do that? Again, I'd like the page inside iframe to know that loading was complete. Basically, I'd like to have event, that will work in iframe page as $(function() {}) in parent page.

I am afraid you can't do this in a right way.
See this link : How to add onload event to a div element?
May be somebody should post the ticket to github.

If you own the page being loaded into the iframe, put the code in the page being shown in the iframe, not the parent page. If you do not own the page being loaded into the iframe, you cannot do what you're attempting due to cross-domain security sandbox restrictions. You would need a CORs solution http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

How can I refresh parent window from an iframe?

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.