Javascript Manipulation of DOM Within iFrame From Opened Window - javascript

My main page is from "DomainA" and I have an iFrame within that from "DomainB". The page within the iFrame has an onclick event to open a window, also from DomainB.
I'm trying to update an input field inside the iFrame from the opened window using:
window.opener.document.getElementById('foo').value = 'bar';
This works fine in FF, however in IE I get the error: SCRIPT70: Permission denied
It seems like I'm getting blocked because of the Same Origin Policy, but the page that opens the window, and the opened window are both from DomainB.
I'm using a relative URI within window.open(). Is IE determining domain from the parent of the iframe?
How can I get around this?

Turns out another developer had added the follwing line inside one of the scripts:
document.domain = 'bla.com';
This was causing that behaviour. Please disregard, thx.

Related

Is there a way to prevent an iframe from redirecting parent window, but in such a way that "top level" redirects still work inside the iframe itself?

So I've read about the HTML5 sandbox property and I understand that if I want to prevent an iframe redirect its parent window I can use the sandbox property leaving allow-top-navigation out. However when this is done, if the iframe was originally relying on top level redirection, what happens in its place is that it redirects to a blank page, effectively breaking navigation.
Can I prevent the iframe from tinkering its parent window while still allowing "top level" redirects, only letting these work within the context of the iframe instead of being top level?
Edit: For context, I'm working with a third party and its page has a form with a target _top. If the iframe is sandboxed, upon submitting the form users get a blank page, if it's not sandboxed the entire page is redirected. I'm looking for something that would allow to submit the form and show the result within the iframe itself.
With HTML5 the iframe sandbox attribute was added.
At the time of writing this works on Chrome, Safari, Firefox and recent versions of IE and Opera but does pretty much what you want:
Allows the iframe content to be treated as being from the same origin as the containing document
<iframe src="url" sandbox="allow-same-origin"></iframe>
Browser Compatibility
Some Useful links
w3schools for sandbox
developer.mozilla.org iframe
-
You can use the onbeforeunload property and determine if you wan to redirect or not.
Here is the docs page for it
Basically what I would try is this:
Make a function that adds the sandbox attribute with everything, just leaving out the allow-top-navigation, to the iframe
Bind a function to the onbeforeunload property of the iframe that calls the function that adds the sandbox attribute (be sure not to return anything because a dialog will pop-up)
This should work because the request is made in the iframe first, and then we can prevent it from carrying over to our top level window.
Another thing you should check is if you maybe left out the allow-formsoption, which can cause what you are describing.
Please let me know if any of this worked.

Possible to reload the page when a cross domain child popup window is closed? IE7+

Is it possible to reload the parent page when a child popup window is closed? the child popup is in a different domain unfortunately. If so, how? I am working with IE7+, but the site is in compatibility mode. I.e., I am trying to do something like:
//in parent window
var popup = window.open('http://otherdomain.com/popup', '', 'status=no,toolbar=no,scrollbars=yes,menubar=no,directories=no,location=no,top=0,left=0,resizable=yes');
popup.onunload = function(){
window.location = window.location;
};
I've had some code work while within the same domain, but when cross domain, that produced:
0x800a0046 - JavaScript runtime error: Permission denied
I know that popups are a bad practice, but that's what I have to do in this case.
It seems like postmessage doesn't work in IE7.
If you can add code to the popup, add this in the parent window
window.name="mainwindow";
and add this in the popup
window.onbeforeunload=function() {
window.open("http://openersite.com/whatever","mainwindow");
}

Safari parent javascript function

Im having a strange issue only in safari browser, im calling a parent window's javascript function from within a child iframe.
Initially the iframe's src will be an external site which will redirect to my site after the work is done. The redirect page contains the following three lines of code.
This seems to work in all browsers except safari.
The only call within the iframe is
<script>
self.parent.PARENT_FUNCTION("param");
</script>
Ive tried several other ways instead of self.parent like top.PARENT_FUNCTION,etc but still the main window's location seems to change.
One thing we noticed is that while the redirect is happening within the iframe, im getting a security certificate warning, once I clieck continue, then the browsers location changes to the new redirect url instead of just the iframe's src.
any clues what could the issue be ?.
Apparently the issue is with safari browser and invalid security certificate of the site within the iframe.
It basically does a frame busting and changes the main window's url if the site within the iframe is having an invalid ceritificate.

Reload a specific frame from a popup window

I have a popup window, and from there, I want the parent window to reload, but a specific frame not the entire page.
So a user clicks a button from within a frame, it opens the popup. Now from the popup, based on a specific event, I want to reload a frame from the parent window.
Is this possible in IE?
I have a page index.php that has 2 iframes in it.
From the 2nd iframe a new popup window opens.
When the user clicks on a button or closes the popup window, I want to reload iframe#2 (the one that opened the window).
How can I do this?
I have tried:
opener.location.reload();
opener.top.document.getElementById('myIFrameId').location.reload()
opener.myIFrameId.location.reload();
Nothing seems to work.
I found a great jQuery plugin that works in all modern browsers, including IE8.
It allows you to easily call up a secondary browser window with parameters and then your allowed to pass data between the two, similar to how postMessage API works.
These data messages in turn can load new content or alternate webpage into the original iframe2 that's on your parent page once you analyze the incoming jQuery data.
Article: jQuery plugin for communication between browser windows
Online Demo: Parent Page
Download Project: windowmsg.zip
The downloaded files will work directly from your desktop, unlike jsFiddle since it's not permitted there.
Yet another solution that works great when you don't need a secondary browser window and the use of a floating iframe is acceptable, just use a lightbox clone that's iframe capable, such as Shadowbox-js.
The benefit of this method is that your in complete control of how the iframe closes, unlike the above secondary browser window that has it's own browser close button which may not trigger your desired events.
The callback during the lightbox clone closure event can take care of changing the contents in the parent pages iframe 2 as needed. Also, you can choose to have the lightbox bound within the iframe 2 (lightbox clone installed in iframe page), or have it fullscreen (lightbox clone installed in parent page).
In your case, window.opener is the window object of the iframe that opened the popup, so opener.location.reload() should work: Demo
Demo sources:
Main page: http://jsfiddle.net/jefferyto/DWeYZ/
Iframe: http://jsfiddle.net/jefferyto/WWbg9/
Popup: http://jsfiddle.net/jefferyto/TKQUJ/
I kind of rebuilt this functionality here:
http://jsfiddle.net/JBWTn/3/
Clicking the button in the popup will change the border look of a frame in the original window . The key here is navigating through the original window's frames using
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]')
(quite similar to what Frank van Puffelen suggested)
To reload the frame instead of just changing its style, use
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]').location.reload()
...like you tried in your question already.
This question reminded me of the functionality in phpMyAdmin (where you can run SQL queries from a popup window and have the results shown in the main window), so I had a quick look ;)
Have you tried:
opener.frames["myIFrameId"].location.reload();
it will show error "Error: Permission denied to access property 'reload'"
that's possibly "the same origin policy" problem.
or you create a div wrapper over the iframe and re generate iframe again

What javascript code/library can I use to open a Pop up on browser window from a small iframe contained in the webpage?

I want to open a remote url inside a javascript popup instead of doing window.open().
I came across libraries like lytebox,lightbox,thickbox which do that if the popup is opened from main webpage.
However my requirement is to open the popup from the link which occurs in a small iframe within the main page.( I can not alter the code of the main page, however Iframe webpage is fully in my control)
When I include those libraries in my iframe webpage, it opens the popup, but restricted only
to within iframe.How to make it appear over whole browser window ?
This is what i want : The user clicks on "click here" and it opens a javascript layer,not
restricted to within iframe.
you can just use
parent.document
from the iframe to access the parent window, if it is from the same domain. Otherwise, security concerns are raised.
You can inject the javascript by creating a script element in the parent's document, and then will be able to access the necessary functions.

Categories