Detect window close command from child (iframe) - javascript

I have an iframe in my html page from another website.
User does something in that iframe, and then the page closes itself. (that page isn't for me, I can't change the functionality of that)
I want my html page to detect this close command from child and then, change visiblity of the iframe to false.
How to do that??

Save the current location and use use setInterval to start the loop.
var startingLocation = document.getElementById('myIFrame').location;
setInterval("checkChildLocation",1000);
function checkChildLocation() {
if(document.getElementById('myIFrame').location != startingLocation) {
/* the iframe has changed */
}
}
Or something like that.

I believe this violates the cross origin policy, and cannot be accomplished. Have a look at:
https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript
http://en.wikipedia.org/wiki/Same_origin_policy

Related

How to open a link inside an iframe from a hta in the default browser

What I need is just like How can I open a link in the default web browser from an HTA?, but with the restriction that the link sits inside an iframe.
The iframe's loads a page in our server.
Idea: can the iframe's redirect be detected & prevented, so then we'd run code like in https://stackoverflow.com/a/185581/66372. How?
Update 1
To be clear: the problem we're trying to solve is that when the user clicks on any link, it opens in the default browser.
One option similar to mplungjan's answer, is to capture the click event for all links in the iframe's DOM. Is there a more generic option that works at the iframe, document or body level? (and thus also works with delayed loads and any other tricks)
Something like this, which should be perfectly allowed in an HTA which has elevated rights
window.onload=function() {
window.frames["iframe_in_this_document"].onload=function() {
var links = this.document.getElementsByTagName("a");
for (var i=0;i<links.length;i++) {
url = links[i].href;
if (url) links[i].onclick=function() {
var shell = new ActiveXObject("WScript.Shell");
shell.run(this.href);
return false;
}
}
}

Refresh iframe when screen is clicked

Not too familiar with javascript. I have done some searching and am having trouble implementing this code into my current project.
Basically want to refresh the iframe when the screen is clicked. I currently have this code:
document.getElementById('').contentWindow.location.reload(true);
I want to integrate it into this code:
$(".launch").loadthis({ direction: "left", connect: true });
How would I go about this?
There are some issues that are unclear in your question.
1) What do you mean when you say "Screen is clicked" ?
Anywhere in the open browser window?
Anywhere in the open browser window including the iframe?
2) Is your IFRAME 100% of the width and height of the browser window?
Regardless, below I break down your problem and hopefully give you a solution...
How do we refresh a webpage?
You can refresh a webpage using:
location.reload(true);
How do we refresh an iframe?
You may refresh an IFRAME using the code here:
Refresh an iframe
<iframe id="myiframe" src="http://google.com"></iframe>
document.getElementById("myiframe").src = "http://www.google.com?"+(+new Date());
How do we detect the click?
You can use the solution here:
https://stackoverflow.com/a/2622026/1688441
document.onclick= function(event) {
// Compensate for IE<9's non-standard event model
//
if (event===undefined) event= window.event;
var target= 'target' in event? event.target : event.srcElement;
alert('clicked on '+target.tagName);
};
Remaining issues:
What happens if user clicks within IFRAME?
If the user clicks within the IFRAME, and we control the code of the IFRAME we can have a click listener within the HTML/JAVASCRIPT of the IFRAME and trigger a refresh.
If we have different domains, due to security reasons there is not much that can be done.
window.addEventListeneder("click", windowClickHandler);
function windowClickHandler(event) {
document.getElementById('iframe_id').contentWindow.location.reload();
}
Also see this question;

Passing Messages from iFrame Across all Browsers

I have an embed-able iframe that will be used on 3rd party sites. It has several forms to fill out, and at the end must inform the parent page that it is done.
In other words, the iframe needs to pass a message to it's parent when a button is clicked.
After wading through oceans of "No, cross-domain policy is a jerk" stuff, I found window.postMessage, part of the HTML5 Draft Specification.
Basically, you place the following JavaScript in your page to capture a message from the iframe:
window.addEventListener('message', goToThing, false);
function goToThing(event) {
//check the origin, to make sure it comes from a trusted source.
if(event.origin !== 'http://localhost')
return;
//the event.data should be the id, a number.
//if it is, got to the page, using the id.
if(!isNaN(event.data))
window.location.href = 'http://localhost/somepage/' + event.data;
}
Then in the iframe, have some JavaScript that sends a message to the parent:
$('form').submit(function(){
parent.postMessage(someId, '*');
});
Awesome, right? Only problem is it doesn't seem to work in any version of IE. So, my question is this: Given that I need to pass a message from an iframe to it's parent (both of which I control), is there a method I can use that will work across any (>IE6) browser?
In IE you should use
attachEvent("onmessage", postMessageListener, false);
instead of
addEventListener("message", postMessageListener, false);
The main work-around I've seen used involves setting a hash value on the parent window and detecting the hash value in the parent, parsing the hash value to obtain the data and do whatever you want. Here's one example of doing that: http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/. There are more options via Google like this one: http://easyxdm.net/wp/.
This is way simpler than that.
You say you control both the parent and the content of the frame you can set up two way
communication in javascript.
All you need is
yourframename.document.getElementById('idofsomethinginttheframe')
And then from inside the frame address anything outside it with
parent.document

Accessing parent DOM/function from within an Iframe embedded in Windows 7 gadget

I have the following issue, Im creating a windows 7 gadget, which uses Iframe to load content.I have full control on the contents of the Iframe, what I want to do is, call a function in the parent (windows 7 gadget html document), from within this Iframe, or even trigger a flyout from within the Iframe, when there is hover on a link or something.
Any help is greatly appreciated.
Thanks
Although Windows Desktop Gadgets were initially said to be excluded from the restrictions of the Same Origin Policy, that is only true of XMLHttpRequests. If the <iframe> is pointing to a page on the www, then any communication between the framed page and the hosting gadget will be blocked. If this is the case then you might be able to use the method of cross-domain communication that relies on changing the hash of the topmost window. From inside the frame, you would do something like this:
window.top.location.hash = "#ShowFlyout";
Then, in the code for the gadget you'd have something like this:
window.setInterval(function () {
if (window.location.hash == "#ShowFlyout") {
window.location.hash = "";
System.Gadget.Flyout.file = "flyout.htm";
System.Gadget.Flyout.show = true;
}
}, 100);
I don't have my windows machine on hand to test it right now, but you could try it nonetheless.
If the iframe is pointing to a html document on the local machine, then you should be able to access the global System variable as a member of the topmost window object — which is the gadget — like this:
var System = window.top.System;
System.Gadget.Flyout.file = "some.htm";
System.Gadget.Flyout.show = true;
Or, also assuming you have control over the content of the flyout, you could set an event handler on all links with jQuery (since you tagged it):
$("a", iframe.contentWindow.document).click(function () {
System.Gadget.Flyout.file = this.href;
System.Gadget.Flyout.show = true;
});

Find window previously opened by window.open

We've got the following situation, running from a single domain:
Page A uses window.open() to open a named window (a popup player). window.open() gives page A a reference to the window.
User now reloads page A. The reference to the named window is lost. Using window.open() to "find" the window has the unfortunate side effect of reloading it (undesirable). Is there any other way to get a reference to this window?
Try this:
var playerUrl = 'http://my.player...';
var popupPlayer= window.open('', 'popupPlayer', 'width=150,height=100') ;
if(popupPlayer.location.href == 'about:blank' ){
popupPlayer.location = playerUrl ;
}
popupPlayer.focus();
It will open a blank window with a unique name. Since the url is blank, the content of the window will not be reloaded.
AFAIK, no there isn't..
A kind-of-dirty-but-i-guess-it-will-work hack would be to periodically reset the reference on the parent window from within the popup using window.opener, with something like this code:
setInterval(function() {
if(window.opener) {
window.opener.document.myPopupWindow = window
}
}, 100)
In the parent window, you'll be able to access document.myPopupWindow, even after a reload (well, 100ms after the reload). This should work cross browser.
Actually what you did is destroy the parent (page A) of the created window (Popup), so it has no more reference to the original parent therefore you can't get a direct reference.
The only solution I can think of is using a browser that offers you added javascript capability to cycle through active windows (tabs) and find one that has a special property (ie: your reloaded page A) that gets recognized by the popup.
Unfortunately I guess only firefox has some added capability or extension that gives you this flexibility. (it is also a security risk though)
This should work. Add this code in the popup:
function updateOpener() {
if (window.opener)
window.opener.document.myPopupWindow = window;
else
setTimeout(updateOpener, 100);
}
updateOpener();
And this in onload of the parent window. To make sure myPopupWindow have been set wait 100 ms before accessing it.
setTimeout(function() {
if (document.myPopupWindow)
document.myPopupWindow.focus();
}, 100);
If all the windows share a common Url origin you can register a ServiceWorker and then access all windows from the ServiceWorker: https://developer.mozilla.org/en-US/docs/Web/API/Clients
AFAIK You won't be able to pass a reference to other windows from WorkerService to your window but you can establish communications with the ServiceWorker via
https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage
https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage
It Might help someone, If you opened an child tab and after refreshing the parent tab, you still want to focus on that child tab instead of opening new child tab: -
const chatPopup = window.open('', 'chatPopup');
if (chatPopup.location.href === 'about:blank' || !chatPopup.location.href.includes('/chat')) {
this.openNewWindow = window.open('/chat', 'chatPopup');}

Categories