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