总有一款适合你。。。
如果想了解iframe有关传值请参看之前文章:iframe跨不跨域通讯方式集合;
这篇主要是说说其他几种页面之间传值的实现:
实现一:url传值
这种传值方式就是通过在url后面增加参数,然后打开该url后页面获取参数信息,再用js进行处理。
main.html:
<input id='myText'><button onClick='post()'>
<script>
function post(){
url= "other.html?name="+escape(document.getElementById('myText').value);
location.href=url;
}
</script>
other.html:<script>
var url=location.search,obj={};
if(url.indexOf("?")!=-1){
var str = url.substr(1)
strs= varstr.split("&");
for(var i=0;i<strs.length;i++){
obj[strs[i].split("=")[0]]=unescape(strs[ i].split("=")[1]);
}
}
alert(obj.name)
</script>
实现二:cookie传值:
实现思想就是通过document.cookie进行设置值以及取值
main.html
<script>
function setCookie(name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() +Days*24*60*60*1000);
document.cookie = ""+name +"="+ escape (value) + ";expires=" + exp.toGMTString();
}
setCookie('name','yuchao');
location.href = "other.html";
</script>
other.html:
<script>
function getCookie(name){
var arr =document.cookie.match(new RegExp("(^|)"+name+"=([^;]*)(;|$)"));
if(arr !=null) return unescape(arr[2]);
return null;
}
document.getElementById(xx).innerHTML=getCookie('name');
</script>
这里需要注意的是,如果你在静态页面下测试chrome浏览器是无法读取设置cookie的,也就是说如果要实现该传值必须将运行环境放到服务器上。
实现三:showModalDialog方式:
使用方式:
var rtn=window.showModalDialog(url ,arguments,style);
参数说明:
url要新打开的窗口链接,为防止缓存一般都会加上?random="+Math.random()
arguments传递参数内容,参数类型不限,可以是对象数组等,例如{name:xxx}
style打开窗口样式控制,用来控制新窗口外观等信息,可以使用下面一个或几个
参数名 | 参数介绍 |
dialogHeight | 对话框高度,不小于100px |
dialogWidth | 对话框宽度 |
dialogLeft | 离屏幕左的距离 |
dialogTop | 离屏幕上的距离 |
center | { yes | no | 1 | 0 } : 是否居中,默认yes,但仍可以指定高度和宽度 |
help | {yes | no | 1 | 0 }: 是否显示帮助按钮,默认yes |
resizable | {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no |
status | {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal] |
scroll | { yes | no | 1 | 0 | on | off }:是否显示滚动条。默认为yes |
接受参数页面调用window.dialogArguments;取得传递参数,
关闭弹出页面后也可以利用window.returnValue进行回传值。
举例如下:
main.html:
<script>
function dialogPost(){
var rtn=window.showModalDialog('other.html' ,{name:'yuchao',sex:'male'} );
document.getElementById('dialag').innerHTML='弹出窗口返回数据为:'+rtn;//返回nihao
}
</script>
other.html:
<button onClick='closeNow()'>
<script>
var obj = window.dialogArguments;
alert("您传递的name为:" + obj.name)
function closeNow(){
window.returnValue='nihao';
window.close();
}
</script>
特别说明:利用该方式可以在静态页面下打开一个窗口,但是不能在静态下进行传值,也需要放置服务器上才可。
实现四:postMessage
html5中一种先进的通讯方式 : 详见之前一篇文章