window.name应用于浏览器端数据存储
本代码简单地分享利用window.name实现浏览器端数据存储:
1、在同一个页面一个地方设置window.name = "abc",另外一个地方读取window.name,自然能得到"abc",这个很简单就不举例了
2、利用window.name实现页面跨域交互:demo.html是主页面,proxy.html是一个空的HTML文件(由于OSC不允许不输入任何代码,所以这里加了个空script),这两个文件都在同一个域下;remote.html是另外某个域下的文件
代码中有这么两处设置:
frame.contentWindow.location = self.cfg.proxyUrl;
和
frame.src=url;
这里说明下:
第一处设置是为了设置当前页面地址栏显示的URL(这样浏览器历史记录中也存的是这个),它是一个站内URL
第二处设置是为了让iframe显示的文档来自远程页面
1.图片

2. [代码]demo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>window.name实现跨域主页面</title>
</head>
<body>
<button id="getDataBt">获取数据</button>
<div id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
dataRequest = {
_doc : document,
cfg: {
proxUrl: 'proxy.html' // proxy.html是一个空文件
}
};
dataRequest.send = function(url, callback) {
if(!url || typeof url !== "string") {
return;
}
var frame = this._doc.createElement("iframe"), state = 0, self = this;
this._doc.body.appendChild(frame);
frame.style.display = "none";
var clear = function() {
try {http://www.huiyi8.com/qzone/
frame.contentWindow.document.write('');
frame.contentWindow.close();
self._doc.body.removeChild(frame);
}QQ空间背景
catch(e) {
}
};
var getData = function() {
try {
var data = frame.contentWindow.name;
}
catch(e) {
}
clear();
if(callback && typeof callback === "function") {
callback(data);
}
};
$(frame).load(function() {
if(state === 1) {
getData();
}
else if(state === 0) {
state = 1;
frame.contentWindow.location = self.cfg.proxyUrl;
}
});
frame.src = url; // 设置frame的src属性为远程页面的URL
};
var testUrl = 'remote.html?' + new Date().getTime();
$("#getDataBt").click(
function() {
dataRequest.send(testUrl, function(result) {
$("#result").html(result);
});
}
);
});
</script>
</body>
</html>
3. [代码]proxy.html
<script type="text/javascript">
//
</script>
4. [代码]remote.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>远程页面</title>
</head>
<body>
<div id="content">
我是远程数据,来自remote.html!
</div>
</body>
<script type="text/javascript">
window.name = document.getElementById("content").innerHTML;
</script>
</html>
window.name应用于浏览器端数据存储的更多相关文章
- Web Storage:浏览器端数据储存机制
目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...
- 浏览器本地数据存储解决方案以及cookie的坑
本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...
- JS中浏览器的数据存储机制
一.JS中的三种数据存储方式 cookie.sessionStorage.localStorage 二.cookie 1.cookie的定义: cookie是存储在浏览器上的一小段数据,用来记录某些当 ...
- JavaScript浏览器本地数据存储
浏览器本地存储主要使用的是sessionStorage和localStorage.两者都支持,sessionStorage保存的是浏览器和服务器的一次对话信息,只在一次回话中有效.当在新标签页或新窗口 ...
- 常见的浏览器端的存储技术:cookie
工作原理: cookie是存在用户硬盘中,用户每次访问站点时,Web应用程序都可以读取Cookie包含的信息.当用户再次访问这个站点时,浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie. ...
- 仿Redis用来作前端浏览器的数据存储结构
用js写了一个类似redis存储结构的类库,目前只有的存储类型只有hash.set两个, 还没测试过性能,欢迎各位猿友能够帮我指出程序代码的缺陷, 后期有时间会完善其他几个类型的存储结构. /**** ...
- HTML 5浏览器端数据库
HTML 5浏览器端数据库为什么要使用浏览器端数据库:随着浏览器处理能力的增强,越来越多的双喜鸟网站开始考虑在客户端存储大量的数据,这可以减少用户从服务器获取数据的等待时间. 1.本地存储-本地存储可 ...
- html5 浏览器端数据库
为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage — 本地存储 可 ...
- 浏览器端-W3School-Browser:Window 对象
ylbtech-浏览器端-W3School-Browser:Window 对象 1.返回顶部 1. Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架 ...
随机推荐
- HDU4768:Flyer [ 二分的奇妙应用 好题 ]
传送门 Flyer Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- spring boot -- 无法读取html文件,碰到的坑
碰到的坑,无法Controller读取html文件 1. Controller类一定要使用@Controller注解,不要用@RestController 2. resource目录下创建templa ...
- What should do in Production
Using Compose in production https://docs.docker.com/compose/production/
- 关于PDF的读取与绘制
本文方法参考了:官方文档.见A function that draw a PDF page的代码部分: void MyDisplayPDFPage (CGContextRef myContext, s ...
- Action Bar详解(二)
在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果. 一.添加A ...
- BUPT复试专题—Python List(2014)
题目描述 在Python中,List (列表)是一种非常重要的数据结构.它与C/C++/Java中的 数组有些类似,但支持添加新元素时的动态扩展.在这个问题中,你需要处理如下 的几种对List的操作. ...
- ci中 chrome对favicon.ico请求,导致log报错 解决方法
chrome浏览器会自动对favicon.ico进行请求,所以当没有为网站添加 favicon.ico 时会出现404的页面错误在实际开发过程中,CI框架 打开 ERROR log,会一直显示ERRO ...
- 【C#】高级语言特有的单例模式
public class Singleton { private Singleton () { } // 变量标记为 readonly.第一次引用类的成员或创建实例时,仅仅实例化一次instance对 ...
- qt动画入门
Qt-4.6新增了Animation Framework(动画框架),让我们可以方便的写一些生动的程序. 不必像曾经的版本号一样,全部的控件都枯燥的呆在伟大光荣的QLayout里,或许它们可以唱个歌, ...
- androidproject有红色叹号的解决方式
首先,查看SDK版本号,一般有两处.第一处是project.properties文件里的target=android-?改动成自己工程相应的SDK版本号.第二处是manifest文件里, androi ...