Log in

View Full Version : closing of Window Widget created page


serone
10-04-2009, 05:38 PM
1) Script Title: Window 1 (iframe content)

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

3) Describe problem:

I am a newbe to both Window Widget and javascript and am a little lost. I would like to use the 'Google' window script sample:

<code>
<!-- 1) DHTML Window Example 1: -->

<script type="text/javascript">
<!--
var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://somepage.com/memlog.html", " ", "width=510px,height=220px,resize=0,scrolling=0,center=1", "recal")
googlewin.onclose=function(){ //Run when window is being closed (return false to cancel action):
return window.confirm("Close window?")
-->
}
</script>
</code>

Which works ok. It opens the memlog.html window over the current page. My problem is in closing the created window using buttons on the memlog page. Here is the memlog.html code:

<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Wire Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Test website." />
<meta name="keywords" content="German" />
<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="windowfiles/dhtmlwindow.js">
/***********************************************
* DHTML Window Widget- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>

<body bgcolor="#cococo" oncontextmenu="return false">

<!-- <form name="test" action="action"> -->
<div align="center" style="color: red; font-weight: bold; font-size: 20pt">Member Login</div>
<br /><br />
<p align="center">
Username <input type="text" name="uname" size="20" />
<img src="images/transparent.gif" alt="space" />
Password <input type="password" name="pw" size="20" />
</p>

<p align="center">
<input type="button" name="login" value="Login" onclick="dhtmlwindow.close(this._parent)" />
<img src="images/transparent.gif" alt="space" />
<input type="button" name="cancel" value="Cancel" onclick="t.close()" />
<img src="images/transparent.gif" alt="space" />
<input type="button" name="close" value="Close" onclick="windowinstance.close()" />
<img src="images/transparent.gif" alt="space" />
<input type="button" name="close" value="Close" onclick="googlewin.close()" />
<img src="images/transparent.gif" alt="space" />
<a href="#" onclick="googlewin.close; return false">Close Window</a>
<input type="button" name="close" value="Close" onclick="windowinstance.close()" />
</p>


<!-- </form> -->
</body>
</html>
</code>
No matter which way I try, none of the buttons work to close the page. What am I doing (or not doing) that's wrong??

SER
ddadmin
10-04-2009, 07:44 PM
This question has actually been answered a few times on the forums already. Anyhow, when accessing the DHTML window functions from the IFRAME page itself, you need to prefix the default code with ".parent", so for example:


<input type="button" name="close" value="Close" onclick="parent.windowinstance.close()" />

BTW, your memlog.html page doesn't need to include the DHTML window script, only the parent page that launches memlog.html. That is unless on memlog.html, you're further launching another DHTML window.
serone
10-07-2009, 02:00 PM
This question has actually been answered a few times on the forums already. Anyhow, when accessing the DHTML window functions from the IFRAME page itself, you need to prefix the default code with ".parent", so for example:


<input type="button" name="close" value="Close" onclick="parent.windowinstance.close()" />

BTW, your memlog.html page doesn't need to include the DHTML window script, only the parent page that launches memlog.html. That is unless on memlog.html, you're further launching another DHTML window.

Thanks for the response. I replaces your code into memlog but when I click it nothing happens except the button shows it has been clicked. The URL is http://www.gwpsocal.com/index2.html.

Stephen
ddadmin
10-07-2009, 09:44 PM
The code isn't working due to a JavaScript security issue, namely, a mismatch of the domains of the calling page and the page contained in the DHTML Window. Try adding "www" to the URL you're displaying in the window, so the two match:


var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://www.gwpsocal.com/memlog.html", " ", "width=510px,height=420px,resize=1,scrolling=1,center=1", "recal")
googlewin.onclose=function(){ //Run when window is being closed (return false to cancel action):
return window.confirm("Close window?")
serone
10-07-2009, 10:33 PM
The code isn't working due to a JavaScript security issue, namely, a mismatch of the domains of the calling page and the page contained in the DHTML Window. Try adding "www" to the URL you're displaying in the window, so the two match:


var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://www.gwpsocal.com/memlog.html", " ", "width=510px,height=420px,resize=1,scrolling=1,center=1", "recal")
googlewin.onclose=function(){ //Run when window is being closed (return false to cancel action):
return window.confirm("Close window?")

Ok, made the change and put the www on the call to memlog page. Still no change in button responce. Using FF, I checked the error log which gave several errors for the css file and a red error "parent.windowinstance is undefined in www.gwpsocal.com/memlog.html"

This is current code for that page:

<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>WPCL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Test website." />
<meta name="keywords" content="GWP" />
<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />
</head>

<body bgcolor="#cococo" oncontextmenu="return false">

<!-- <form name="test" action="action"> -->
<div align="center" style="color: red; font-weight: bold; font-size: 20pt">Member Login</div>
<br /><br />
<p align="center">
Username <input type="text" name="uname" size="20" />
<img src="images/transparent.gif" alt="space" />
Password <input type="password" name="pw" size="20" />
</p>

<p align="center">
<input type="button" name="close" value="Close" onclick="parent.windowinstance.close()" />

<img src="images/transparent.gif" alt="space" />
<!--
<input type="button" name="login" value="Login" onclick="dhtmlwindow.close(this._parent)" />
<img src="images/transparent.gif" alt="space" />
<input type="button" name="cancel" value="Cancel" onclick="t.close()" />
<img src="images/transparent.gif" alt="space" />
<input type="button" name="close" value="Close" onclick="windowinstance.close()" />
<img src="images/transparent.gif" alt="space" />
<input type="button" name="close" value="Close" onclick="googlewin.close()" />
<img src="images/transparent.gif" alt="space" />
<a href="#" onclick="googlewin.close; return false">Close Window</a>
<input type="button" name="close" value="Close" onclick="windowinstance.close()" />
-->
</p>


<!-- </form> -->
</body>
</html>
</code>

Now I do have the 'form' tag commented out, would that be the problem??

SR
ddadmin
10-08-2009, 03:29 AM
You need to replace "windowinstance" in "parent.windowinstance" with the variable assigned to dhtmlwindow.open(), in your case, "googlewin":


var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://www.gwpsocal.com/memlog.html", " ", "width=510px,height=220px,resize=1,scrolling=1,center=1", "recal")
googlewin.onclose=function(){ //Run when window is being closed (return false to cancel action):
return window.confirm("Close window?")
serone
10-08-2009, 05:20 AM
That did the trick. Is there a 'user guide' for this stuff??

Many thanks! :)

Ps: How do I mark this solved?