javascript跨域刷新實(shí)現(xiàn)代碼
更新時間：2011年01月01日 18:43:40 作者：
在XX項(xiàng)目里面需要通過一個iframe去刷新同一窗口的另外一個iframe。一個超級簡單的處理，但我還在blog上記一記，有些看似簡單的東西，在真實(shí)項(xiàng)目應(yīng)用中還是值得思考地方
三個頁在同一個窗口，分別為main.htm，left.htm和right.htm。
main.htm
<html>
<head>
<title>實(shí)現(xiàn)跨</title>
</head>
<body>
<div>主窗口</div>
<iframe id="left" name="left" width="500px" height="300px;" src="left.htm" ></iframe>
<iframe id="right" name="right" width="100px" height="100px;" src="right.htm" ></iframe>
</body>
</html>
left.htm
<html>
<head><title>左邊</title></head>
<body>
<div>我是左邊</div>
<div><img src="http://www.enjoymyself.info/images/buysc.jpg" alt=" " /></div>
</body>
</html>
right.htm
<html>
<head><title>右邊</title></head>
<body>
<div>
<input onclick="onclickRefresh();" type="button" value="提交" /></div>
<script type="text/javascript">
function onclickRefresh()
{
parent.frames[ "left"].location.reload();
//window.left.location.reload();
}
</script>
</body>
</html>
看到right.htm里面
function onclickRefresh()通過 parent.frames["left"].location.refresh();來實(shí)現(xiàn)右邊頁面刷新左邊頁面.
如果在主頁面加
<div><input type="button" onclick="mainRefresh();" value="主提交" /></div>
<script type="text/javascript">
function mainRefresh()
{
window.left.location.reload();
}
</script>
則可以通過主頁面刷新子頁面。
雖然這樣可以超級簡單的實(shí)現(xiàn)的目的，但是實(shí)際項(xiàng)目中，數(shù)據(jù)不會是這么簡單的，最常見是左\右樹，目錄樹的創(chuàng)建加載(如創(chuàng)建一千個節(jié)點(diǎn))本來就是比較耗資源。如果還是通過方式來刷新左右頁面，效率之低可見而知，那么是不是可以通過其他方式來實(shí)現(xiàn)跨域刷新或者提交呢？
我所想到的是通過ajax實(shí)現(xiàn)數(shù)據(jù)局部加載。而不是整個樹的加載。另外通過jquery的json處理方式也可實(shí)現(xiàn)局部數(shù)據(jù)的更新。
不知道還有沒有其他更高效的方法？1000個節(jié)點(diǎn)的樹加載，效率值得思考的問題。
main.htm
復(fù)制代碼 代碼如下:
<html>
<head>
<title>實(shí)現(xiàn)跨</title>
</head>
<body>
<div>主窗口</div>
<iframe id="left" name="left" width="500px" height="300px;" src="left.htm" ></iframe>
<iframe id="right" name="right" width="100px" height="100px;" src="right.htm" ></iframe>
</body>
</html>
left.htm
復(fù)制代碼 代碼如下:
<html>
<head><title>左邊</title></head>
<body>
<div>我是左邊</div>
<div><img src="http://www.enjoymyself.info/images/buysc.jpg" alt=" " /></div>
</body>
</html>
right.htm
復(fù)制代碼 代碼如下:
<html>
<head><title>右邊</title></head>
<body>
<div>
<input onclick="onclickRefresh();" type="button" value="提交" /></div>
<script type="text/javascript">
function onclickRefresh()
{
parent.frames[ "left"].location.reload();
//window.left.location.reload();
}
</script>
</body>
</html>
看到right.htm里面
function onclickRefresh()通過 parent.frames["left"].location.refresh();來實(shí)現(xiàn)右邊頁面刷新左邊頁面.
如果在主頁面加
復(fù)制代碼 代碼如下:
<div><input type="button" onclick="mainRefresh();" value="主提交" /></div>
<script type="text/javascript">
function mainRefresh()
{
window.left.location.reload();
}
</script>
則可以通過主頁面刷新子頁面。
雖然這樣可以超級簡單的實(shí)現(xiàn)的目的，但是實(shí)際項(xiàng)目中，數(shù)據(jù)不會是這么簡單的，最常見是左\右樹，目錄樹的創(chuàng)建加載(如創(chuàng)建一千個節(jié)點(diǎn))本來就是比較耗資源。如果還是通過方式來刷新左右頁面，效率之低可見而知，那么是不是可以通過其他方式來實(shí)現(xiàn)跨域刷新或者提交呢？
我所想到的是通過ajax實(shí)現(xiàn)數(shù)據(jù)局部加載。而不是整個樹的加載。另外通過jquery的json處理方式也可實(shí)現(xiàn)局部數(shù)據(jù)的更新。
不知道還有沒有其他更高效的方法？1000個節(jié)點(diǎn)的樹加載，效率值得思考的問題。
相關(guān)文章
Bootstrap模態(tài)框(modal)垂直居中的實(shí)例代碼
這篇文章主要介紹了Bootstrap模態(tài)框(modal)垂直居中的實(shí)例代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-08-08
這篇文章主要給大家介紹了關(guān)于js如何獲取圖片url的Blob值并預(yù)覽的相關(guān)資料，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
在js中提供數(shù)據(jù)查找了函數(shù)有很多，但我查找了很久都沒有能實(shí)現(xiàn)我要的方法，后來發(fā)現(xiàn)可以使用indexOf函數(shù)來實(shí)現(xiàn)查找與定位數(shù)組元素索引值的具體方法，各位朋友可參考2016-03-03
BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹
響應(yīng)式導(dǎo)航條就是可以在不同的設(shè)備下查看不同的效果。這篇文章主要介紹了BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹的相關(guān)資料，小編認(rèn)為本文介紹的非常的不錯，特此分享給大家，供大家參考2016-05-05
本篇文章主要是對js判斷輸入是否為中文的函數(shù)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript中常見加密解密方法的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價值，感興趣的小伙伴可以了解一下2023-03-03
限制復(fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄拗茝?fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
bootstrap選項(xiàng)卡擴(kuò)展功能詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap選項(xiàng)卡擴(kuò)展功能，增加關(guān)閉，超出一行顯示下拉，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
定時器(setTimeout/setInterval)調(diào)用帶參函數(shù)失效解決方法
setInterval()方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式,setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式，詳細(xì)使用方法可以參考下本文2013-03-03
ES6 Array常用擴(kuò)展的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Array常用擴(kuò)展的應(yīng)用,結(jié)合實(shí)例形式分析各種常見擴(kuò)展方法針對Array數(shù)組的轉(zhuǎn)換、遍歷、查找、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06