网页弹出窗口之window.open()

QQ截图20181205191211.png

window.open 弹出新窗口的命令;
'page.html' 弹出窗口的文件名
'newwindow' 弹出窗口的名字(不是文件名),非必须,可 用空''代替;
top=0 窗口距离屏幕上方的像素值;
left=0 窗口距离屏幕左侧的像素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏;
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),

例如,window.open ("login.html", "newwindow", "height=400, width=400,top=200,left=500,toolbar=no, menubar=no, scrollbars=no,resizable=no, location=no,status=no");

即可弹出文件名为login.html的网页窗口
例如我的为一个登录界面。


login.png

这样,就会产生一个新的窗口,从而形成一个父窗口和一个子窗口。
显而易见的,我们难免需要对两个窗口的属性值进行传递和修改,这里
推荐使用localStorage属性来进行操作。

localStorage的优势

1.localStorage拓展了cookie的4K限制
2.localStorage会可以将第一次请求的数据直接存储到本地,对后续数据处理调用非常方便。

localStorge的劣势

1.localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
2.localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

样例:

子窗口

mmexport1544007621258.jpg

主窗口

mmexport1544007623986.jpg

在子窗口中用window.localStorage.setItem()方法存储相应元素的值,并在主窗口通过localStorage.getItem()获取相应名称的值,从而达到在两个窗口间进行的效果。

附上localStorage的一些主要方法:

localStorage.a = 3; //设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
最常用的便是setItem()和getItem()方法了。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容