JS實現各種級別直接的頁面跳轉@重新整理頁面@框架集的綜合案例

y_keven發表於2013-05-23
JS框架

1.跳到另一個頁面的兩種方法：

window.location.href = '1.html'
window.location.reload('11.html')

2.如果使用了框架，但是又想跳到一個頁面，而不是在框架指定的頁面顯示，如何操作？
parent.document.location.href="./frontstage/login.jsp";

3.用JavaScript重新整理上級頁面和當前頁面
window.parent.main.document.location.reload();//上級頁面
document.location.reload();//當前頁面

4.每個frame元素或者iframe元素就是一個框架,這個框架是一個視窗,在這個視窗中載入一個html文件.使用下面的幾種方法都可以引用frame或iframe元素:
window.frames[index]
windows.frames["框架名"]
windows.框架名

6.如果想從框架所載入的網頁中獲取對父視窗的引用,那麼就可以使用下面的方法:
window.parent

7.如果要對父視窗中某個框架的引用,那麼就可以使用下面的方法:
window.parent.框架名

也可以使用下面的方法獲取對父視窗的最頂端框架的引用:
window.top

8.html 如何將新的網頁檔案在框架Frame中開啟
   第一種方法為： window.open('Url',MainFrame,'width=......,height=....');
其中：Url ：需要開啟的頁面; MainFrame ：裝載（包含）這個頁面的框架 ; width=......,height=....：頁面的風格設定
   另外一種方法為： MainFrame.document.location = "Url"; 即直接指定MainFrame的url指向為 某個url。
當然類似的也可以用 document.getElementById("MainFrame").src = "Url";
第一種方法是被動式的指定某個頁面要載入到哪個框架內; 後兩種方法主動的設定框架將要載入哪個頁面

 

 

10.html例項參考參考：（這個例項是左右框架結構）；這種開啟方式只用frame的name 屬性即可 指定開啟位置
_blank 在新的瀏覽器視窗中開啟連結的文件，同時保持當前視窗不變。
_parent 在顯示連結的框架的父框架集中開啟連結的文件，同時替換整個框架集。
_self 在當前框架中開啟連結，同時替換該框架中的內容。
_top 在當前瀏覽器視窗中開啟連結的文件，同時替換所有框架。

1.主框架頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
</head>
<frameset rows="*" cols="138,*" framespacing="1" frameborder="yes"
 border="1" bordercolor="#000000">
 <frame src="left.html" name="leftFrame" scrolling="No"
  noresize="noresize" id="leftFrame" />  <frame src="right.html"
  name="mainFrame" id="mainFrame" />
</frameset>
<noframes>
 <body></body>
</noframes>
</html>

2。左框架頁面：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
</head>
<body link="black" vlink="olive" alink="blue">
 <p>
  <a href="我的首頁.html" target="mainFrame">我的首頁</a>
 </p>
 <p>
  <a href="我的日記.html" target="mainFrame">我的日記</a>
 </p>
</body>
</html>

3.右框架頁面：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
</head>
<body></body>
</html>

相關文章