Override the getFocus of an external page that loads in iframe - javascript

I have multiple pages laoding in an iframe and one of them seems to be getting focus, since the page scrolls (by itself) to that spcific iframe.
Is there a way to override this?

iFrame onFocus event can be overridden to set the focus priority. But, be careful because it sometimes doesn't work with Mozilla. Also, I would prefer to use the Div and display HTML inside the Div.

Related

Hide an amp-iframe when content of iframe doesn't load

I am wondering if there is any way to hide an AMP iframe in the case that the content inside the iframe does not load?
I have tried setting height to 0px (using postMessage from inside the iframe when content fails), but AMP does not allow this and I am having problems finding a way around this.
I would prefer a fix that allows me to hide it from within the iframe, but I don't think this is actually possible, so a simple solution to hide it from the outside page would also be great at this stage.
AMP Does't allow you to change much things dynamically, Because it may affect the user experience and page load. AMP is all about user first experience
So Unfortunately you don't have anyway to do it right now...!

Changing the height of iframe according to the content in it?

I have a popup div in which I have an iframe. Initially, I have set the height of iframe to some px according to the content in it.
Now, I have a click event on the iframe from which I am redirecting to another view but this view has more content to fit the height. So I want to change the height of the iframe on that event or on the load of other view but I am unable to access the iframe from within that click event of a button.
EasyXDM provides a bunch of useful functions in order to manipulate communication between the client and fetched iframes
Here is an example similar with what you want to achieve.
Keep in mind that you should also control the content into the iframe as well.

JavaScript: Switch CSS on the fly from iframe

I'm trying to make the code from this link work in a layout where the buttons are within an iframe element, but so that it also affects the parent window:
http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
Right now when I insert the buttons into an iframe and click it, it only changes the css for the iframe. Similarly, when I place the button in the main window, it has no effect over the iframe. How can I change it to affect both at the same time, preferably with the buttons in the iframe?
Vaguely related to that, is the code for the cookie in that example outdated or something? It seems to work only very inconsistently between different browsers.

How can I stop an iframe reloading when I change its position in the DOM?

Is there any way to stop an iframe re-loading its contents when I change its position within the DOM? Simple example:
<script type="text/javascript">
function moveiframe() {
var dest = document.getElementById('newparent');
dest.appendChild(document.getElementById('googleframe'));
}
</script>
<iframe src="http://www.google.com" id="googleframe"></iframe>
<input type="button" onclick="moveiframe()" value="Move" />
clicking the "Move" button changes the parent of the iframe, and reloads its contents (in Firefox and Chrome, but not IE).
Any suggestions would be much appreciated!
[Updated with background info]
I'm loading the site's adverts in placeholder divs at the bottom of the page (to prevent advert loading from holding up the page load) - and then shifting the divs they've been written in to their correct container once loaded. It all works great... unless the ad that gets served uses an iframe (like google adsense) in which case the ad gets loaded twice and the serving is messed up.
Considering the simplicity of your test case, it looks like the only methods you have available to put an element inside another will always force the contents to reload.
[Edit] After seeing what you're trying to do, there are a couple things you can try:
All ads could be served in IFRAMEs (on your own site) which will not hold up loading of the page and can be placed in the right place right away.
As mentioned above IFRAMEs won't hold up loading of the page so you could put the ads in place right away if they are IFRAMEs and load them at the bottom if they are something else. Of course, this won't work if the slow part is before you know if you are going to get an IFRAME or not.
You could keep the content in it's placeholder DIV but when it's done loading just reposition (with CSS absolute positioning) over the right place in the page. Not the most elegant solution, but should work fine.
I'm regretting my original answer, as it seems to be causing other headaches. Here's a few other potential solutions that you may not have tried:
Place the ad scripts inside of divs with their display style set to none. Then, move them to their final desintation and change them to display: block after the page has loaded. Perhaps this would prevent the iframes from loading their content inititially.
Try the same thing, only with visibility set to hidden, then changed to visible.
A quick guess would be to unset the value of the src attribute of the iframe element or set it to "about:blank".
It is up to you to restore the previous value (or any value) to the src attribute of the iframe (using JavaScript).
Regards,
If the ads are a fixed size, you could place them in absolutely-positioned divs instead. Then, once the page loads, you could move those container divs to their designated spots. There are a lot of Javascript samples out there for calculating an absolute position from a relative position. Of course, you would have to reserve space visually in the destination divs so the ads wouldn't cover the content.
What about using an ajax request to load the ad's contents, and adding the contents to the DOM when the ajax call returns, instead of using an iframe?

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.

Categories

Resources