Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 565
  • Last Modified:

window.opener very inconsistent

I have a 'parent' page that onclick of a button triggers a 'window.open'
In this window page I have a function that redirects, fetches a querystring value and then before it closes, triggers a function on the 'parent'

At the moment I am using 'window.opener' to target a function on the 'parent' page but it appears to be very flaky.

Example:
ABWindow = window.open(self.clientUrl + '?callbackurl=', 'ABPopup', 'height=500,width=1024,resizable=yes,status=yes,scrollbars=yes');
if (window.focus) {
	ABWindow.focus();
}

function testScripts(id) {
    if (id) {
        console.log(id);
    }
}

Open in new window


Then in the popup, once I have fetched all the information I need I have following:
try {
	if (window.dialogArguments) // Internet Explorer supports window.dialogArguments
	{
		console.log("dialog triggered");
		window.dialogArguments.testScripts(paramArray['imageUrl']);
	}
	else // Firefox, Safari, Google Chrome and Opera supports window.opener
	{
		if (window.opener) {
			console.log("opener triggered");
			window.opener.testScripts(paramArray['imageUrl']);
		}
	}
} catch (err) {
	console.log(err.description || err);
}
window.close();

Open in new window


Now, bizarrely sometimes this works but equally a handful of times I get an function is undefined error on the window.opener call.
Is there a better, more stable way of doing this? Any ideas what may be causing this?

Thanks
0
Al4ddin2
Asked:
Al4ddin2
1 Solution
 
RobOwner (Aidellio)Commented:
Is Ajax an option?  what's the reason behind the popup?

**EDIT: I'm unable to continue with this question so please read on
0
 
Al4ddin2Author Commented:
The popups are being used to integrate a number of different image plugins. Instagram and another image library. The image library requires you to navigate away to that library, select an image and it then returns the image URL in the query string back to a designated callback URL.
0
 
RobOwner (Aidellio)Commented:
Have you considered a modal popup such as jQuery's Dialog?

http://jqueryui.com/dialog/#modal-form (click the "create new user" button)
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
RobOwner (Aidellio)Commented:
Furthermore,

http://jsbin.com/zuwom/1/edit

You can see I've loaded images from Flikr via ajax
0
 
RobOwner (Aidellio)Commented:
A further demo here of using a "popup": http://jsbin.com/zuwom/2/edit?js,output
0
 
Al4ddin2Author Commented:
Hi thanks,

It has to be a new window 'popup' as for the image library it requires you to navigate their site to select an image then the callback Url passes it back to my site. So if I was to use a modal or dialog then it would require an iframe which leads to more issues.

I also can't seem to get your 'popup' demo to work ?

The image library is Asset Bank which  you can see here: https://www.assetbank.co.uk/blog/asset-bank-cms-integration-demo/
0
 
Al4ddin2Author Commented:
Equally, with Instagram you need to declare a redirect URI in your app, I want this to appear in multiple places on my site so rather than creating an app for each instance I have a single HTML handler file that the redirect URI always returns to (passing the AccessToken in the querystring) this then calls the window.opener passing this access token back to the initial 'parent' page to then load the relevant images.
0
 
RobOwner (Aidellio)Commented:
To get the demo to work, just type a word and hit enter.
 I'll reviewyour other comments now
0
 
RobOwner (Aidellio)Commented:
The modal or dialog doesn't use an iframe but requests the information via the Flikr API and a simple array [1,2,3,4,5] is returned.

Given you have the API for Asset Bank at your disposal, you should use that.

It specifies that you can receive the content as JSON which would work nicely with an Ajax and modal approach.
0
 
Al4ddin2Author Commented:
Hi Rob,

I understand the modal and dialog doesn't use an iframe - that was my issue. I have to use the Asset Bank integration as I have used it because that was a client request - they want to be able to navigate around their own asset bank and select an image.

Everything seems to work OK other than these window.opener function requests seem to inconsistently return 'undefined is not a function'
0
 
RobOwner (Aidellio)Commented:
Ok - I can understand where you're coming from but just had to rule it out as an option.

What's confusing me is how are you putting your script in popup? e.g.:

window.dialogArguments and window.opener
0
 
Al4ddin2Author Commented:
My popup.html looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title></title>
        <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            $(function () {
                $('#selectedImg').attr('src', paramArray['imageUrl']);

                console.log(paramArray);
                if (paramArray['clientUrl']) {
                    window.location.href = paramArray['clientUrl'];
                } else {
                    try {
                        window.opener.assetBankScripts(paramArray['imageUrl']);
                    } catch (err) {
                        console.log(err.description || err);
                    }
                }
                //window.close();
            });

            var paramArray = getUrlVars();

            function getUrlVars() {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (var i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }

        </script>
    </head>
    <body>
        <img src="" id="selectedImg" />
    </body>
</html>

Open in new window


I've commented out the window.close script so I can check the console logs but otherwise that would be used to close it down.

What this does is take the response from AssetBank, and the querystring for imageUrl (?imageUrl=/cms-images/Market_Estate_002_28_11_2012_External_Use.jpg) and capture the image location and pass it back to the window opener script.
0
 
RobOwner (Aidellio)Commented:
Ok, it's more complicated than it first looked.  I have alerted more experts to review this for you as I can't really help you much further with this.

Rob.
0
 
leakim971PluritechnicianCommented:
put your script at the end of the page you popup
<script>
try {
	if (window.dialogArguments) // Internet Explorer supports window.dialogArguments
	{
		console.log("dialog triggered");
		window.dialogArguments.testScripts(paramArray['imageUrl']);
	}
	else // Firefox, Safari, Google Chrome and Opera supports window.opener
	{
		if (window.opener) {
			console.log("opener triggered");
			window.opener.testScripts(paramArray['imageUrl']);
		}
	}
} catch (err) {
	console.log(err.description || err);
}
window.close();
<script>
<body>
</html>

Open in new window

0
 
Slick812Commented:
greetings Al4ddin2, , I used the javascript "dialogArguments" thing ONE TIME, and learned NEVER to use it again, at least that was my concept for it's usefulness as NOT USEFUL! Please look at this page that explains the "dialogArguments" thing -
   http://msdn.microsoft.com/en-us/library/ie/ms533723%28v=vs.85%29.aspx

to me your problem is this line -
    window.dialogArguments.testScripts(paramArray['imageUrl']);

as far as I know the "window.dialogArguments" IS NOT a reference BACK to the window that opened the "pop out" window. if the "pop out" was created with the IE call of -
    showModelessDialog( )

then the call to
var URL_argu = window.dialogArguments;
does NOT get the opener, but just the URL arguments like
        &imageUrl=www %2Eabc%2Ecom%2Falpha.jpg

It is my view that in the current browsers, that the "pop out" window JS can use window.opener in all browsers to get a reference BACK to the production window.
However, your javascript "LOGIC" needs to be adjusted because you have TWO different web pages to load in it, and I guess that the Java script for each page will need to be different?

= = = = = = = = = = = = =
you might consider an AJAX solution, have an ajax call to your SERVER, and then your server accesses the "Image page" extracts the URL argument and send it back to the browser.
0
 
Michel PlungjanIT ExpertCommented:
IF you have opened the window with

  showModalDialog(url,window,....)

then the dialogArguments DOES contain the opener. Since you do not, remove the code completely
try {
	if (window.dialogArguments) // Internet Explorer supports window.dialogArguments
	{
		console.log("dialog triggered");
		window.dialogArguments.testScripts(paramArray['imageUrl']);
	}
	else {

Open in new window

and the
    }
} catch (err) {
  console.log(err.description || err);
} 

Open in new window

belonging to it, leaving

if (window.opener) {
   console.log("opener triggered");
   window.opener.testScripts(paramArray['imageUrl']);
}

Open in new window


I would change the following:

remove the window.close from the popup, you need the code to execute - this may be the reason you have the issue.
Move the window.close to the end of the script in the opener:
if (ABWindow && !ABWindow.closed) ABWindow.close;
change all console.log to
window.console&&console.log
since some IEs will give error if the console is not open at the time of the call.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now