How to open a new page or page jump in a web design

Source: Internet
Author: User
Tags button type

One, ASP. C # Opens a new page or page jump

1. The most commonly used page jumps (the original window is replaced): Response.Redirect ("newpage.aspx");

2. Open a local webpage or Internet using the URL address: respose.write ("<script Language=&apos;javascript&apos;>window.open (&apos;") + url+ "&apos;);</script>");

3. The original window is retained to open another page (the browser may block, need to release): Response.Write ("<script>window.open (newpage.aspx&apos;,&apos;_ blank&apos;) </script> ");

4. Another way of writing the effect with 1: Response.Write ("<script>window.location=newpage.aspx&apos;</script>");

5. Also the original window is replaced (often used to pass the session variable page jump): Server.Transfer ("newpage.aspx");

6. original window reserved, open a new window as a dialog box: Response.Write ("<script>window.showmodelessdialog (&apos;newpage.aspx&apos;) </script> ");

7. Open a new window in the dialog box, the original window is replaced by: Response.Write ("<script>window.showmodeldialog (&apos;newpage.aspx&apos;) < /script> ");

8. Open the Compact window: Respose.write ("<script language=&apos;javascript&apos;>window.open" (&apos;) +url+ "&apos;,&apos;&apos;,&apos;resizable=1,scrollbars=0,status=1,menubar=no,toolbar=no, Location=no, menu=no&apos;);</script> ");

Second, JavaScript open a new page or page jump

1. Jump directly into the original form
onclick= "window.location.href= ' the page you want to jump to";

2. Open the page in a new form by:
onclick= "window.open (' the page you are going to jump to ')"

3. Return to previous page (may not be valid for local test, available on the server)
Window.history.back (-1);
<a onclick= "Javascript:history.back (1);" href= "#" > Back </a>
<a href= "Javascript:history.go ( -1)" > Back </a>
<a href= "<%=request.servervariables (" Http_referer ")%>" > Back to prev </a>

4. Some usage
Button type:
<input name= "Pclog" type= "button" value= "axmanhz Blog" onclick= "location.href=&apos; connection Address &apos;" >
Direct Jump Type:
<script>window.location.href= "Connection Address";</script>
Open a new window:
<a href= "javascript:" onclick= "window.open (' Connection address &apos;,&apos;&apos;,&apos;height=500,width= 611,scrollbars=yes,status =yes&apos;) ">123</a>

Auto-Open <SCRIPT>
<!--
window.open ("Connection Address", "NewWindow", "Height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, Resizable=no,location=no,status=no ")//write a line
-
</SCRIPT>

After the script runs, the "connection address" will open in the new form NewWindow, the width is 100, the height is 400, the screen top 0 pixels, the screen left 0 pixels, no toolbar, no menu bar, no scroll bar, not resizable, no address bar, no status bar. Please compare.

In the above example, there are a few parameters that are commonly used, and there are many other parameters, see four.

▲ each parameter description
Where yes/no can also use 1/0;pixel value for a specific value, unit pixels.

Parameters | Range of Values | Description

alwayslowered | yes/no | Specifies that the window is hidden after all windows
alwaysraised | yes/no | Specifies that the window hovers above all windows
depended | yes/no | Whether to close at the same time as the parent window
Directories | yes/no | NAV2 and 3 's catalog columns are visible
Height | Pixel value | Window height
hotkeys | yes/no | Set safe exit Hotkey in window without menu bar
Innerheight | Pixel value | The pixel height of the document in the window
Innerwidth | Pixel value | The pixel width of the document in the window
Location | yes/no | Whether the location bar is visible
MenuBar | yes/no | Whether the menu bar is visible
Outerheight | Pixel value | Set the pixel height of the window (including the decorative border)
Outerwidth | Pixel value | Set the pixel width of the window (including the decorative border)
resizable | yes/no | Whether the window size can be adjusted
ScreenX | Pixel value | The pixel length of the window from the left edge of the screen
ScreenY | Pixel value | The pixel length of the window from the top edge of the screen
ScrollBars | yes/no | Whether the window can have a scroll bar
TitleBar | yes/no | Whether the window title bar is visible
Toolbar | yes/no | Whether window toolbars are visible
Width | Pixel value | The pixel width of the window
Z-look | yes/no | Whether the window is activated to float on top of other windows

=====================================================

"1, the most basic popup window code"
Auto Eject
<script language= "JavaScript" >
<!--
window.open ("Connection address")
-
</SCRIPT>

Because it's a javascripts code, they should be placed between <script language= "JavaScript" > tags and </script>. <!--and is useful for browsers with low versions, where the code in the tags is not displayed as text in these old browsers. It's a good habit to develop. window.open ("Connection address") is used to control the popup new window, if the pop-up window is not in the same path as the main window, the path, absolute path (http://) and relative path (. /) are available. You can use both single and double quotes, just don't mix. This section of code can be added anywhere in the HTML,

"2, after setting the popup window"

Let's talk about the settings for the popup window. Just add a little something to the code above. Let's customize the appearance of this pop-up window, size, pop-up position to fit the specific situation of the page.
Auto Eject
<script language= "JavaScript" >
<!--
window.open ("link Address", "NewWindow", "height=100, width=400, Top=0, left=0, Toolbar=no,menubar=no, Scrollbars=no, Resizable=no,location=n o, Status=no ")//This sentence should be written in one line
-
</SCRIPT>

Parameter explanation:

<script language= "javascript" > JS script start;
window.open the command that pops up the new window;
The file name of the "link address" pop-up window;
"NewWindow" pop-up window name (not file name), non-mandatory, free "" instead;
height=100 window height;
width=400 window width;
The pixel value of the Top=0 window from the top of the screen;
The pixel value of the left=0 window from the left side of the screen;
Toolbar=no whether the toolbar is displayed, yes is displayed;
Menubar,scrollbars represents the menu bar and scroll bar.
Resizable=no whether the window size is allowed to change, yes is allowed;
Location=no whether the address bar is displayed, yes is allowed;
Status=no whether the information in the status bar is displayed (usually the file is already open), yes is allowed;
</SCRIPT> JS script End

"3. Use function to control popup window"

The following is a complete code.
<script language= "JavaScript" >
<!--
function Openwin () {
window.open ("link Address", "NewWindow", "height=100, width=400, toolbar =no, Menubar=no,
Scrollbars=no, Resizable=no, Location=no, Status=no ")//write a line
}
-
</script>
<body onload= "Openwin ()" >
Any page content ...
</body>

A function Openwin () is defined here, and the function content is to open a window. There is no use before calling it. How to invoke it?

Method One: <body onload= "Openwin ()" > Browser to read the page when the pop-up window;
Method Two: <body onunload= "Openwin ()" > Pop-up window when the browser leaves the page;
Method Three: Call with a connection:
<a href= "#" onclick= "Openwin ()" > Open a Window </a>
Note: The "#" used is a virtual connection.
Method Four: Call with a button:
<input type= "button" onclick= "Openwin ()" value= "open Window" >

"4, pop up 2 windows at the same time"

Change the source code slightly:

<script language= "JavaScript" >
<!--
function Openwin () {
window.open ("link address 1", "NewWindow", "height=100, width=100, Top=0, Left=0,toolbar=no,
Menubar=no, Scrollbars=no, Resizable=no, location=n O, Status=no ")//write a line

window.open ("link Address 2", "NewWindow2", "height=100, width=100, Top=1 xx, Left=100,toolbar=no,
Menubar=no, Scrollbars=no, Resizable=no, Loca Tion=no, Status=no ")//write a line
}
-
</script>
To avoid the pop-up of the 2 window overlay, use top and left to control the pop-up position do not cover each other. Finally, the four methods mentioned above can be called.
Note: The name of the 2 windows (NewWindows and NewWindow2) is not the same, or altogether empty.

"5, main window open file 1.htm, while pop-up small window page.html"

Add the following code to the main window <script language= "JavaScript" >
<!--
function Openwin () {
window.open ("page.html", "", "width=200,height=200")
}
-
</script>
Join <body> Area:
<a href= "1.htm" onclick= "Openwin ()" >open</a>.

"6, pop-up window timing close Control"

Let's take some control of the popup window, and the effect will be better. If we add a little piece of code to the pop-up page (note that the HTML that joins page.html is not on the main page, otherwise ...), will it be cooler to turn it off automatically after 10 seconds?
First, add the following code to the <script language= "JavaScript" >
function Closeit ()
{
SetTimeout ("Self.close ()", 10000)//MS
}
</script>
Then, and then use <body onload= "Closeit ()" > This sentence instead of page.html Zhongyuan Some <BODY> this sentence can be. (This sentence must not forget to write Ah!) The function of this sentence is to invoke the code that closes the window, and then close the window on its own after 10 seconds. )

"7. Add a Close button to the pop-up window"

<FORM>
<input type= "button" value= "Close" onclick= "Window.close ()" >
</FORM>
Oh, now more perfect!

"8, included in the pop-up window-a page two windows"

The example above contains two windows, one is the main window and the other is a small pop-up window. In the following example, you can perform the above effect on a page.

<script language= "JavaScript" >
function Openwin ()
{
Openwindow=window.open ("", "Newwin", "height=250, width=250, Toolbar=no, scrollbars=" +scroll+ ", Menubar=no"); Write a line
OpenWindow.document.write ("<TITLE> example </TITLE>")
OpenWindow.document.write ("<body bgcolor= #ffffff >")
OpenWindow.document.write ("OpenWindow.document.write ("New window opened!")
OpenWindow.document.write ("</BODY>")
OpenWindow.document.write ("</HTML>")
OpenWindow.document.close ()
}
</SCRIPT>
<body>
<a href= "#" onclick= "Openwin ()" > Open a Window </a>
<input type= "button" onclick= "Openwin ()" value= "open Window" >
</body>

Look at the code inside OpenWindow.document.write () is not the standard HTML? Just write more lines in the format. Pay attention to one more label or one less tag and there will be an error. Remember to end with OpenWindow.document.close ().

"9, the ultimate application-popup window of the cookie control"

Recall that the above pop-up window, although cool, but a little bit of a problem (immersed in joy, must not find it?) For example, if you put the above script in a page that needs to be frequently passed (such as the homepage), then each time you refresh the page, the window will pop up once, is it annoying? :-(
Is there a way to solve it? yes! ;-) Follow me. We can use cookies to control it.
First, add the following code to the <HEAD> area of the main page HTML:

<script>
function Openwin () {
window.open ("page.html", "", "width=200,height=200")
}
function Get_cookie (Name) {
var search = Name + "="
var returnvalue = "";
if (Document.cookie.length > 0) {
offset = document.cookie.indexOf (search)
if (offset! =-1) {
Offset + = Search.length
End = Document.cookie.indexOf (";", offset);
if (end = =-1)
end = Document.cookie.length;
Returnvalue= (document.cookie.substring (offset, end))
}
}
Return returnvalue;
}
function Loadpopup () {
if (Get_cookie (&apos;popped&apos;) ==&apos;&apos;) {
Openwin ()
Document.cookie= "Popped=yes"
}
}
</script>

Then, with <body onload= "Loadpopup ()" > (note not openwin but Loadpop!) Replace the main Page <BODY> this sentence can be. You can try refreshing this page or re-entering the page, and the window will never pop up again. The real pop-only-once!.

Write to the pop-up window here the production and application skills are basically finished

The above content is organized according to the network data

How to open a new page or page jump in a web design

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.