JavaScript DHTML/Javascript Objects/window
Содержание
- 1 Add Desktop Component
- 2 Clear Interval
- 3 Clear Timeout
- 4 Close a window
- 5 Create a Popup window
- 6 Create a prompt
- 7 Define dialog arguments
- 8 Display an alert dialog
- 9 Display confirm dialog
- 10 Display information in status (window.status)
- 11 Execute Javascript
- 12 Handling Status Message Changes
- 13 Hide a window
- 14 Is window closed
- 15 Is window Open
- 16 Let window navigate to a URL (window.navigate("http://www.java2s.com"))
- 17 Move window By
- 18 Move window to
- 19 Navigate window to a URL
- 20 "offScreenBuffering" Example
- 21 Open a new Window
- 22 Open a new window and close it
- 23 Print a window
- 24 "screenTop" Example
- 25 Set Default Status Information
- 26 Set dialog window top
- 27 Set dialog window width
- 28 Set the dialog window height
- 29 Set the dialog window left
- 30 Set Timeout (window.setTimeout)
- 31 Show a Popup
- 32 Show Browser UI
- 33 Show Help (window.showHelp("URL"))
- 34 Show Modal Dialog (window.showModalDialog("URL", myArguments, ""))
- 35 Show Modeless Dialog (window.showModelessDialog(..))
- 36 Windown screen Left
- 37 Window resize By
- 38 Window self
Add Desktop Component
<html>
<head>
<script language="JavaScript">
function function1() {
window.external.AddDesktopComponent("http://www.wbex.ru/style/logo.png",
"image", 150, 150, 95, 95);
}
</script>
</head>
<body>
<button onclick="function1();">Click here to add the new active desktop component
</button>
</body>
</html>
Clear Interval
<html>
<body>
<script language="javascript">
var intInterval = 0
function myInterval(){
alert("Hello");
}
</script>
<button onclick="intInterval=window.setInterval("myInterval()", 1000);">
Start interval
</button>
<button onclick="intInterval=window.clearInterval(intInterval);">
Stop interval
</button>
</body>
</html>
Clear Timeout
<html>
<body>
<script language="javascript">
var intValue = 0
function myMethod(){
alert("Hello");
}
</script>
<button onclick="intValue=window.setTimeout("myMethod()", 1000);">Start timeout</button>
<button onclick="intValue=window.clearTimeout(intValue);">Stop timeout</button>
</body>
</html>
Close a window
<html>
<body>
<button onclick="window.close();">Close window</button>
</body>
</html>
Create a Popup window
<html>
<body>
<script language="JavaScript">
var popup = window.createPopup();
popup.document.body.innerHTML = "This will navigate to another site!";
popup.document.body.style.backgroundColor = "yellow";
</script>
<input type="button"
onClick="location.href="http://www.wbex.ru";"
onmouseover="popup.show(100, 100, 200, 100, document.body);"
onmouseout="popup.hide();"
value="Navigate to Another Site">
</body>
</html>
Create a prompt
<html>
<body>
<script language="JavaScript">
function function1() {
window.prompt("Please, enter your full name", "Yes, here");
}
</script>
<input type="button" value="Open a prompt window" onclick="function1();">
</body>
</html>
Define dialog arguments
<html>
<body>
<script language="JavaScript">
function function1() {
var myArguments = new Object();
myArguments.param1 = document.all.myColor.value;
window.showModalDialog("http://www.wbex.ru", myArguments, "");
}
</script>
<select id="myColor">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<button onclick="function1();">Open Window</button>
</body>
</html>
Display an alert dialog
<html>
<body>
<input type="button" onClick="alert("This is an alert window");" value="Click me">
</body>
</html>
Display confirm dialog
<html>
<body>
<script language="JavaScript">
function function1() {
window.confirm("Confirmation window");
}
</script>
<input type="button" value="Click to bring up a confirm window" onclick="function1();">
</body>
</html>
Display information in status (window.status)
<html>
<head>
<script language="JavaScript">
function function1() {
window.status = "Welcome to www.wbex.ru";
}
</script>
</head>
<body>
<p onmouseover="function1();" style="cursor:hand">
Check the status bar message.</p>
</body>
</html>
Execute Javascript
<html>
<body>
<script language="JavaScript">
function function1() {
var m = window.execScript("alert("test");", "JavaScript");
alert("The method returns always "+"""+m+""");
}
</script>
<input type="button" value="Click to execute the script" onclick="function1();">
</body>
</html>
Handling Status Message Changes
<html>
<head>
<title>Generalizable window.status Property</title>
<script type="text/javascript">
function showStatus(msg) {
window.status = msg;
return true;
}
</script>
</head>
<body>
<a href="http://www.example.ru"
onmouseover="return showStatus("Go to my Home page.")"
onmouseout="return showStatus("")">Home</a>
<p><a href="http://mozilla.org"
onmouseover="return showStatus("Visit Mozilla Home page.")"
onmouseout="return showStatus("")">Mozilla</a></p>
</body>
</html>
Hide a window
<html>
<body>
<script language="JavaScript">
var myPopup
function function1() {
myPopup = window.createPopup();
myPopup.document.body.style.backgroundColor = "yellow";
myPopup.show(100,100,100,200,document.body);
}
</script>
<input type="button" value="Show popup window" onclick="function1();">
<input type="button" value="Hide popup window" onclick="myPopup.hide();">
</body>
</html>
Is window closed
<html>
<body>
<button onclick="alert(window.closed);">closed Property Value</button>
</body>
</html>
Is window Open
<html>
<body>
<script language="JavaScript">
function function1() {
var m = window.createPopup();
var n = m.document.body;
n.style.border="solid 2px black";
n.innerHTML = "<font face="verdana">This is the pop-up window content</font>";
m.show(350, 270, 200, 50, document.body);
if (m.isOpen == true) {
setTimeout("function2()", 2000);
}
}
function function2() {
alert("The pop-up window is Open");
}
</script>
<input type="button" value="Open pop-up window" onclick="function1();">
</body>
</html>
<html>
<body>
<button onclick="window.navigate("http://www.wbex.ru");">Go to www.wbex.ru page</
button>
</body>
</html>
Move window By
<html>
<body>
<script language="JavaScript">
function function1() {
window.moveBy(100,100);
}
</script>
<input type="button"
value="Move the window 100 pixels to the left and 100 pixels"
onclick="function1();">
</body>
</html>
Move window to
<html>
<body>
<script language="JavaScript">
function function1() {
window.moveTo(100,300);
}
</script>
<input type="button" value="Move window" onclick="function1();">
</body>
</html>
<html>
<body>
<script language="JavaScript">
function function1() {
window.navigate("http://www.wbex.ru");
}
</script>
<input id=myB
type="button"
value="Navigate to wbex.ru home page"
onclick="function1();">
</body>
</html>
"offScreenBuffering" Example
<html>
<body>
<script language="JavaScript">
function function1() {
window.offScreenBuffering = false;
var m = window.offScreenBuffering;
alert("The value of offScreenBuffering for this window is: \n"+m);
}
</script>
<input type="Button"
value="Turn "off" the offScreenBuffering of this window"
onClick="function1();">
</body>
</html>
Open a new Window
<html>
<body>
<input type="button"
value="Open a new window"
onClick="window.open("http://www.wbex.ru", "_blank")">
<input type="button"
value="Open a blank document"
onClick="document.open("test.htm", "_blank")">
</body>
</html>
Open a new window and close it
<html>
<body>
<script language="JavaScript">
var newWin
function function1() {
newWin = window.open("http://www.wbex.ru",
"subwindow",
"width=400,height=150, left=200, resizable, top=250")
}
function hi() {
if (!newWin.closed) {
alert("The subwindow is closed");
}
}
</script>
<p style="text-decoration:underline;
cursor:hand;"
onClick="function1();">
Click to open new window
</p>
</body>
</html>
Print a window
<html>
<body>
<script language="JavaScript">
function function1() {
window.print();
}
</script>
<input type="button" value="Print this window" onclick="function1();">
</body>
</html>
"screenTop" Example
<html>
<body>
<script language="JavaScript">
function function1() {
var m = ""
m = "The left coordinate is: " + window.screenLeft + "\n";
m += "The top coordinate is: " + window.screenTop + "\n";
alert(m);
}
</script>
<body bottommargin="150">
<input type="button" value="Extract the coordinates" onclick="function1();">
</body>
</html>
Set Default Status Information
<html>
<body>
<body bottommargin=150"
onLoad="window.defaultStatus="This is the status bar message"">
</body>
</html>
Set dialog window top
<html>
<body>
<SCRIPT>
function function1()
{
event.srcElement.blur();
window.showModalDialog("http://www.wbex.ru", "",
"dialogWidth:5cm; dialogHeight:10cm;
dialogTop:0cm; dialogLeft:0cm")
}
</SCRIPT>
</HEAD>
<BODY>
<SELECT onchange="function1()">
<OPTION>Item 1</OPTION>
<OPTION>Item 2</OPTION>
<OPTION>Item 3</OPTION>
</SELECT>
</body>
</html>
Set dialog window width
<html>
<body>
<SCRIPT>
function function1()
{
event.srcElement.blur();
window.showModalDialog("http://www.wbex.ru", "",
"dialogWidth:5cm; dialogHeight:10cm")
}
</SCRIPT>
</HEAD>
<BODY>
<SELECT onchange="function1()">
<OPTION>Item 1</OPTION>
<OPTION>Item 2</OPTION>
<OPTION>Item 3</OPTION>
</SELECT>
</body>
</html>
Set the dialog window height
<html>
<body>
<SCRIPT>
function function1()
{
event.srcElement.blur();
window.showModalDialog("http://www.wbex.ru", "",
"dialogWidth:5cm; dialogHeight:10cm")
}
</SCRIPT>
</HEAD>
<BODY>
<SELECT onchange="function1()">
<OPTION>Item 1</OPTION>
<OPTION>Item 2</OPTION>
<OPTION>Item 3</OPTION>
</SELECT>
</body>
</html>
Set the dialog window left
<html>
<body>
<SCRIPT>
function function1()
{
event.srcElement.blur();
window.showModalDialog("http://www.wbex.ru", "",
"dialogWidth:5cm; dialogHeight:10cm;
dialogTop:0cm; dialogLeft:0cm")
}
</SCRIPT>
</HEAD>
<BODY>
<SELECT onchange="function1()">
<OPTION>Item 1</OPTION>
<OPTION>Item 2</OPTION>
<OPTION>Item 3</OPTION>
</SELECT>
</body>
</html>
Set Timeout (window.setTimeout)
<html>
<body>
<script language="javascript">
var intValue = 0
function myMethod(){
alert("Hello");
}
</script>
<button onclick="intValue=window.setTimeout("myMethod()", 1000);">Start timeout</button>
<button onclick="intValue=window.clearTimeout(intValue);">Stop timeout</button>
</body>
</html>
Show a Popup
<html>
<body>
<script language="JavaScript">
var myPopup
function function1() {
myPopup = window.createPopup();
myPopup.document.body.style.backgroundColor = "yellow";
myPopup.show(100,100,100,200,document.body);
}
</script>
<input type="button" value="Show popup window" onclick="function1();">
<input type="button" value="Hide popup window" onclick="myPopup.hide();">
</body>
</html>
Show Browser UI
<html>
<body>
<script language="JavaScript">
function function1() {
window.external.ShowBrowserUI("LanguageDialog", null);
}
function function2() {
window.external.ShowBrowserUI("OrganizeFavorites", null);
}
function function3() {
window.external.ShowBrowserUI("PrivacySettings", null);
}
</script>
<input type="button"
value="Open the Language Preferences dialog box."
onclick="function1();">
<input type="button"
value="Open the Organize Favorites dialog box."
onclick="function2();">
<input type="button"
value="Open the Privacy Preferences dialog box."
onclick="function3();">
</body>
</html>
Show Help (window.showHelp("URL"))
<html>
<body>
<script language="JavaScript">
function function1() {
window.showHelp("http://www.wbex.ru");
}
</script>
<input type="button" value="Open the help document" onclick="function1();">
</body>
</html>
Show Modal Dialog (window.showModalDialog("URL", myArguments, ""))
<html>
<body>
<script language="JavaScript">
function openWindow() {
var myArguments = new Object();
myArguments.param1 = document.all.myColor.value;
window.showModalDialog("http://www.wbex.ru", myArguments, "");
}
</script>
<select id="myColor">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<button onclick="openWindow();">Open window</button>
</body>
</html>
Show Modeless Dialog (window.showModelessDialog(..))
<html>
<body>
<script language="JavaScript">
function openWindow() {
var myArguments = new Object();
myArguments.param1 = document.all.myColor.value;
window.showModelessDialog("http://www.wbex.ru", myArguments, "");
}
</script>
<select id="myColor">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<button onclick="openWindow();">Open window</button>
</body>
</html>
Windown screen Left
<html>
<body>
<script language="JavaScript">
function function1() {
var m = ""
m = "The left coordinate is: " + window.screenLeft + "\n";
m += "The top coordinate is: " + window.screenTop + "\n";
alert(m);
}
</script>
<body bottommargin="150">
<input type="button" value="Extract the coordinates" onclick="function1();">
</body>
</html>
Window resize By
<html>
<body>
<script language="JavaScript">
function function1(){
window.resizeBy(-100,-100);
}
</script>
<input type="button" value="Resize this window by (-100,-100)" onClick="function1();">
</body>
</html>
Window self
<html>
<body id="myBody" bottommargin=150>
<script language="JavaScript">
function function1() {
alert(window.self.myBody.bottomMargin);
}
</script>
<input type="button" value="Bottom Margin" onclick="function1();">
</body>
</html>