javascript跨域刷新实现代码
更新时间：2011年01月01日 18:43:40 作者：
在XX项目里面需要通过一个iframe去刷新同一窗口的另外一个iframe。一个超级简单的处理，但我还在blog上记一记，有些看似简单的东西，在真实项目应用中还是值得思考地方
三个页在同一个窗口，分别为main.htm，left.htm和right.htm。
main.htm
<html>
<head>
<title>实现跨</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();来实现右边页面刷新左边页面.
如果在主页面加
<div><input type="button" onclick="mainRefresh();" value="主提交" /></div>
<script type="text/javascript">
function mainRefresh()
{
window.left.location.reload();
}
</script>
则可以通过主页面刷新子页面。
虽然这样可以超级简单的实现的目的，但是实际项目中，数据不会是这么简单的，最常见是左\右树，目录树的创建加载(如创建一千个节点)本来就是比较耗资源。如果还是通过方式来刷新左右页面，效率之低可见而知，那么是不是可以通过其他方式来实现跨域刷新或者提交呢？
我所想到的是通过ajax实现数据局部加载。而不是整个树的加载。另外通过jquery的json处理方式也可实现局部数据的更新。
不知道还有没有其他更高效的方法？1000个节点的树加载，效率值得思考的问题。
main.htm
复制代码 代码如下:
<html>
<head>
<title>实现跨</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();来实现右边页面刷新左边页面.
如果在主页面加
复制代码 代码如下:
<div><input type="button" onclick="mainRefresh();" value="主提交" /></div>
<script type="text/javascript">
function mainRefresh()
{
window.left.location.reload();
}
</script>
则可以通过主页面刷新子页面。
虽然这样可以超级简单的实现的目的，但是实际项目中，数据不会是这么简单的，最常见是左\右树，目录树的创建加载(如创建一千个节点)本来就是比较耗资源。如果还是通过方式来刷新左右页面，效率之低可见而知，那么是不是可以通过其他方式来实现跨域刷新或者提交呢？
我所想到的是通过ajax实现数据局部加载。而不是整个树的加载。另外通过jquery的json处理方式也可实现局部数据的更新。
不知道还有没有其他更高效的方法？1000个节点的树加载，效率值得思考的问题。
相关文章
这篇文章主要介绍了Bootstrap模态框(modal)垂直居中的实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2016-08-08
这篇文章主要给大家介绍了关于js如何获取图片url的Blob值并预览的相关资料，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
在js中提供数据查找了函数有很多，但我查找了很久都没有能实现我要的方法，后来发现可以使用indexOf函数来实现查找与定位数组元素索引值的具体方法，各位朋友可参考2016-03-03
响应式导航条就是可以在不同的设备下查看不同的效果。这篇文章主要介绍了BootStrap响应式导航条实例介绍的相关资料，小编认为本文介绍的非常的不错，特此分享给大家，供大家参考2016-05-05
本篇文章主要是对js判断输入是否为中文的函数进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要为大家详细介绍了JavaScript中常见加密解密方法的实现，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下2023-03-03
下面小编就为大家带来一篇限制复选框最多选择项的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了bootstrap选项卡扩展功能，增加关闭，超出一行显示下拉，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
定时器(setTimeout/setInterval)调用带参函数失效解决方法
setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式,setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，详细使用方法可以参考下本文2013-03-03
这篇文章主要介绍了ES6 Array常用扩展的应用,结合实例形式分析各种常见扩展方法针对Array数组的转换、遍历、查找、运算等相关操作技巧,需要的朋友可以参考下2019-06-06
最新评论