2. 程式人生 > >用JS重新整理指定頁面

用JS重新整理指定頁面

阿新 • • 發佈：2019-01-20
先來看一個簡單的例子：
下面以三個頁面分別命名為frame.html、top.html、bottom.html為例來具體說明如何做。
frame.html 由上(top.html)下(bottom.html)兩個頁面組成，程式碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> frame </TITLE></HEAD><frameset rows="50%;,50%;"><frame name=top  src="top.html"
><frame name=bottom  src="bottom.html"></frameset></HTML>

現在假設top.html (即上面的頁面) 有七個button來實現對bottom.html (即下面的頁面) 的重新整理，可以用以下七種語句，哪個好用自己看著辦了。

語句1. window.parent.frames[1].location.reload();

語句2. window.parent.frames.bottom.location.reload();

語句3. window.parent.frames["bottom"].location.reload();

語句4. window.parent.frames.item(1).location.reload();

語句5. window.parent.frames.item('bottom').location.reload();

語句6. window.parent.bottom.location.reload();

語句7. window.parent['bottom'].location.reload();


top.html 頁面的程式碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD
><TITLE> top.html </TITLE></HEAD><BODY><input type=button value="重新整理1" onclick="window.parent.frames[1].location.reload()"><br><input type=button value="重新整理2" onclick="window.parent.frames.bottom.location.reload()"><br><input type=button value="重新整理3" onclick="window.parent.frames['bottom'].location.reload()"><br><input type=button value="重新整理4" onclick="window.parent.frames.item(1).location.reload()"><br><input type=button value="重新整理5" onclick="window.parent.frames.item('bottom').location.reload()"><br><input type=button value="重新整理6" onclick="window.parent.bottom.location.reload()"><br><input type=button value="重新整理7" onclick="window.parent['bottom'].location.reload()"><br></BODY></HTML>
下面是bottom.html頁面原始碼，為了證明下方頁面的確被重新整理了，在裝載完頁面彈出一個對話方塊。

bottom.html 頁面的程式碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> bottom.html </TITLE></HEAD><BODY onload="alert('我被載入了！')"><h1>This is the content in bottom.html.</h1></BODY></HTML>

解釋一下：
1.window指代的是當前頁面，例如對於此例它指的是top.html頁面。
2.parent指的是當前頁面的父頁面，也就是包含它的框架頁面。例如對於此例它指的是framedemo.html。
3.frames是window物件，是一個數組。代表著該框架內所有子頁面。
4.item是方法。返回數組裡面的元素。
5.如果子頁面也是個框架頁面，裡面還是其它的子頁面，那麼上面的有些方法可能不行。

附：
Javascript重新整理頁面的幾種方法：
  1. 1    history.go(0) 
  2. 2    location.reload() 
  3. 3    location=location 
  4. 4    location.assign(location) 
  5. 5    document.execCommand('Refresh') 
  6. 6    window.navigate(location) 
  7. 7    location.replace(location) 
  8. 8    document.URL=location.href 

自動重新整理頁面的方法:
1.頁面自動重新整理：把如下程式碼加入<head>區域中
<meta http-equiv="refresh" content="20">
其中20指每隔20秒重新整理一次頁面.

2.頁面自動跳轉：把如下程式碼加入<head>區域中
<meta http-equiv="refresh" content="20;url=http://www.wyxg.com">
其中20指隔20秒後跳轉到http://www.wyxg.com頁面

3.頁面自動重新整理js版

  1. <script language="JavaScript">
  2. function myrefresh()
  3. {
  4.        window.location.reload();
  5. }
  6. setTimeout('myrefresh()',1000); //指定1秒重新整理一次
  7. </script>

ASP.NET如何輸出重新整理父視窗指令碼語句

1.   this.response.write("<script>opener.location.reload();</script>");  2.   this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");   3.   Response.Write("<script language=javascript>opener.window.navigate(''你要重新整理的頁.asp'');</script>")

JS重新整理框架的指令碼語句

  1. //如何重新整理包含該框架的頁面用   
  2. <script language=JavaScript>
  3.    parent.location.reload();
  4. </script>   
  5. //子視窗重新整理父視窗
  6. <script language=JavaScript>
  7.     self.opener.location.reload();
  8. </script>
  9. (　或　<a href="javascript:opener.location.reload()">重新整理</a>   )
  10. //如何重新整理另一個框架的頁面用   
  11. <script language=JavaScript>
  12.    parent.另一FrameID.location.reload();
  13. </script>

如果想關閉視窗時重新整理或者想開窗時重新整理的話，在<body>中呼叫以下語句即可。

  1. <body onload="opener.location.reload()"> 開窗時重新整理
  2. <body onUnload="opener.location.reload()"> 關閉時重新整理
  3. <script language="javascript">
  4. window.opener.document.location.reload()
  5. </script>

相關推薦

用JS重新整理指定頁面

先來看一個簡單的例子：下面以三個頁面分別命名為frame.html、top.html、bottom.html為例來具體說明如何做。 frame.html 由上(top.html)下(bottom.html)兩個頁面組成，程式碼如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD H

首次進入頁面的時候用js刷新頁面

function span url amp win mes 判斷 class times 　　　　window.onload = function(){ var url=document.location.href; //獲取瀏覽器訪問欄裏的地址

用js寫tab頁面

原理：依據bootStrap框架的tab頁樣式：原生態的是這樣： <!DOCTYPE html> <html>     <head>         <me

Vue.js重新整理當前頁面

Vue.js的路由跳轉很強大，類似ajax的區域性重新整理，路由跳轉時候頁面是不重新整理的，重新整理當前頁面的功能不建議用，但是有的時候確實需要重新整理當前頁面來實現某些需求，這個時候，我們有兩種方法可以實現。   第一種就是傳統的的方法 window.location.reload()

用js寫簡單頁面

var username=document.getElementsByClassName("username")[0]; var pwd=document.getElementsByClassName("password")[0]; v

JS 重新整理當前頁面 返回上一頁並重新整理的方法

 reload 方法，該方法強迫瀏覽器重新整理當前頁面。語法：location.reload([bForceGet])                                                                            

js重新整理當前頁面的幾種方式

Javascript重新整理頁面的幾種方法： history.go(0)  location.reload()  location=location  location.assign(location)  location.replace(location)  1、

自適應：用JS做的自適應，是最差的自適應，記頁面重新整理前後尺寸變化

今天遇到一個硬茬，我在使用weui重構一個頁面時，出現一個問題：路由進入頁面時，頁面內容尺寸硬是會變大，重新整理後又恢復正常： 專案背景：一個使用react-starter-kit構建的B端SPA專案 上圖： 出現問題時的情況：   重新整理後（它本應該的樣子）：   &

用echarts.js製作中國地圖,點選對應的省市連結到指定頁面

這裡使用的是ECharts 2,因為用EChart 3製作的地圖上的省市文字標識會有重疊,推測是引入的地圖檔案china.js,繪製文字的座標方面的問題,所以,這裡還是使用老版本。 ECharts 2需要require載入模組。html中只需要用script引入echarts.js即可。 具體程式碼如下：

用js儲存頁面指定內容到html或excel--IE有效

用js儲存頁面指定內容轉自：  http://rorchina.iteye.com/blog/184425Html程式碼  <script language=javascript>     function Save(){         var txt = do

用js判斷頁面重新整理或關閉的方法(onbeforeunload與onunload事件)

Onunload，onbeforeunload都是在重新整理或關閉時呼叫，可以在<script>指令碼中通過window.onunload來指定或者在<body>裡指定。區別在於onbeforeunload在onunload之前執行，它還可以阻止on

用AJAX實現“防止未登陸人員訪問指定頁面”的功能

dir ive 重定向 oca 憑據 cookies resp 跳轉 nload 為了保護科協官網不被未登錄的同學訪問，用ajax進行判斷和跳轉 小知識：用ajax訪問的servlet的任何跳轉都是無效的，所以跳轉只能在js代碼中進行 以下是servlet代碼 p

解決js中post提交數據並且跳轉到指定頁面的問題總結

設置 表單 for 並且 無法 fun 開發 完成 我們 今天在開發中過程中遇到了這個問題，js中利用JQuery中的 $.post("url", id, function(){}); 這個方法是數據提交正常，但是後臺處理完成之後跳轉無法成功。經過分析，後臺只是將要跳轉

[轉]html頁面調用js文件裏的函數報錯onclick is not defined處理方法

board defined ror tag scrip boa spa 知識 -c 原文地址:http://blog.csdn.net/ywl570717586/article/details/53130863 今天處理html標簽裏的onclick功能的時候總是報錯：Un

WordPress用戶登錄後重定向到指定頁面

rac .com auto ble admin strong eight 定義 key 這篇文章將向您展示WordPress用戶登錄後如何重定向到指定頁面或者文章的技巧。 一、重定向到網站管理面板。 將以下代碼添加到您的當前主題的 functions.php 文件中：

html 頁面調用js鏈接並顯示數據

html 頁面調用js鏈接並顯示數據html 頁面調用js鏈接並顯示數據一、測試頁面1<!doctype html><html><div id=‘dv‘></div> <script src="http://qt.gtimg.cn/q=sz399001"

用js實現頁面跳轉的幾種方式

head 註意 ont rem text pla http bsp cat 通過js或者html或者PHP等動態程序都可以方便的實現跳轉，這裏搜集了幾種頁面跳轉的方式js方式的頁面跳轉1.window.location.href方式 <script langua

用JS去設置HTML頁面鼠標懸浮時改變背景圖片

如果 bubuko 而不是 目標 更改 targe src 驅動 select 首先將每一個li上面添加一個移入事件onmouseover;在懸浮事件裏面設置event事件源 JS樣式裏首先應該找到頁面裏的ul 然後在ul裏面的所有li 　　　　var ln =

js打印頁面指定區域，並去掉頁眉上的時間和請求路徑

div hidden 去掉 text class bsp nbsp hid 需要 需要通過js打印指定頁面的內容 <style media=print type="text/css"> .noprint{visibility:hidden} </style

控制層跳轉：1）調用別人接口；2）指定頁面

clas pin except ring void .get string 指定 test RESTFul 接口中調用重定向到指定 url @RequestMapping(value = "sso", method = RequestMethod.GET)