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.
Related
Is this even possible?
Background
I have a page that's basically just a logo and an iframe.
I have complete control over the parent page and can use whatever tricks I want (html, javascript, php, etc.).
The page in the iframe, however, is a third party page that I have very little control over. I can use no javascript, no css, I can't even modify any links. All I can do is modify some text.
Problem
I only need the logo on the initial page. Once the user logs in or clicks to a different page, I want that new page to open in the parent window. I know about target="_top" and target="_parent", but those won't help me because I have no real access to the links in the iframe.
Question
Is there any attribute I can put on the iframe or javascript I can use in the parent page that will force new pages in the iframe to load in the parent window?
I want to have a javascript/jQuery popup window (child page) that is always in front of the parent page, something like facebook's current picture viewing feature.
it would be closed by the user clicking on the close button.
I have tried as below:
mywindow = window.open ("DownloadForm.aspx", "mywindow","location=1,status=1,scrollbars=1, width=350,height=150");
mywindow.moveTo(350, 350);
this code successfully opened a child page in front of the parent page, but there is jQuery code ( $(#test).click() ) on the parent page which causes the parent page to always be in front.
I tried putting the window.open() code after $(#test).click(), but it didn't solve the problem.
The $(#test).click() is necessary, therefore I need to have a workaround.
I appreciate any help, thank you in advance.
myWindow.focus()
Many modern browsers prevent this from working, but it's the only way.
use following javascript code in the page you are opening in popup
<body onblur="self.focus();">
Im sure you cannot control the order of the window. Instead of a popup (which is often and usually blocked by browsers) why not investigate using a lightbox javascript plugin. They are usually free, stylish and work well.
Just set it from the modal css. The z-index is normally set to 1. Just change it to 9999. That is the purpose of the z-index, to set the popup top level.
If not using bootstrap popup, then you need to use css to set it. Browsers are not guaranteed to place nice with .focus() on a window.
I'm trying to programmatically close a Facebox modal with JavaScript code that's called
within the iframe. That doesn't seem to work well with the JavaScript DOM.
https://github.com/defunkt/facebox
More generally, how would I close a generic modal that embeds an iframe with the code to close it inside the iframe. (sorry for the tounge(or eye) twisting)
Here's my example:
I have a facebox with something like this:
jQuery.facebox("stuff goes here <iframe src="example.php"...." more stuff"); //opens the modal(works great)
Then INSIDE the iframe, I want to call jQuery(document).trigger('close.facebox');. It only seems to work if I call it on the parent page or on the modal page, but not in the actual iframe. Is there a way I can make it close by calling it within an iframe example.php?
Edit: I was asking how I can access the parent frame from inside an iframe with jQuery to oversimplify the question.
You can't modify an element that "belongs" to the parent page from within that popup page. As far as I know you will have to issue your hide code from the parent. You could always have your code inside the dialog do something like this:
parent.$("#dialog").hide();
I think that's what you're asking...
Here's what worked for me:
My page has an IFRAME inside a DIV, the DIV is what facebox is supposed to fadeIn and fadeOut. The SRC of the IFRAME is a page that has a link on it that looks like this:
close this facebox modal
In the HEAD of the page that contains the DIV and IFRAME (NOT the page called into the IFRAME), I have the JavaScript function "close_QM_facebox()" that looks like this:
function close_QM_facebox() { jQuery(document).trigger('close.facebox'); }
That's all. Not tested cross-browser or in production yet. I spent hours Googling this problem and trying everything from changing single quotes to double quotes, document-dot-this and parent-dot-that, window.frames['whatever'], and this one-line function does it. If you're trying to trigger the function from the page that is called into the IFRAME, you have to be sure to use parent.close_QM_facebox(). Hope this helps.
BTW, see lines 47 and 49 of facebox.js ver 1.2 - this solution was right there in the commented-out "Usage" section of the .js file itself. I copied & pasted line 49 into my function, didn't change a thing except un-commenting it :)
The embedded iframe is pointing to a URL on a different domain correct? In this case no, you cannot for security reasons make any calls to the parent document from within the iframe.
I think, you can use FancyBox. There is public methods allowed to close the modal dialog within an iframe, also an option to make the fancy box act like modal window:
- Within an iframe use - parent.$.fancybox.close();
No problem if you use scripting on the same domain, if you want to use cross domain just provide each page (.php/html etc) that call each other an exchange paramater/query safely using POST/GET. But to close the fancybox modal you have to run this methods with the same domain page.
Hope it works for you Stan.
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?
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.