javascript跨域刷新实现代码


Posted in Javascript onJanuary 01, 2011

三个页在同一个窗口,分别为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个节点的树加载,效率值得思考的问题。
Javascript 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
Vue中的scoped实现原理及穿透方法
May 15 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 #Javascript
js注意img图片的onerror事件的分析
Jan 01 #Javascript
JavaScript 计算图片加载数量的代码
Jan 01 #Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 #Javascript
基于jQuery架构javascript基础体系
Jan 01 #Javascript
jQuery技巧总结
Jan 01 #Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 #Javascript
You might like
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
vuex 的简单使用
2018/03/22 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
python openpyxl模块的使用详解
2021/02/25 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
初级Java程序员面试题
2016/03/03 面试题
专科文秘应届生求职信
2013/11/18 职场文书
市场部规章制度
2014/01/24 职场文书
调查研究项目计划书
2014/04/29 职场文书
质量整改通知单
2015/04/21 职场文书
钢琴师观后感
2015/06/12 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python