Window对象的open()方法
程序员文章站
2022-06-15 18:50:17
导航和打开窗口Window 接口的 open() 方法,是用指定的名称将指定的资源加载到浏览器上下文(窗口 window ,内嵌框架 iframe 或者标签 tab )。内联框架 iframeHTML内联框架元素 () 表示嵌套的browsing context(浏览器上下文)。它能够将另一个HTML页面嵌入到当前页面中。解释一下:iframe的name属性可以使window.open() 方法的 windowName 参数值。那么通过window.open()方法指定的资源就会加载到iframe...
导航和打开窗口
Window 接口的 open() 方法,是用指定的名称将指定的资源加载到浏览器上下文(窗口 window ,内嵌框架 iframe 或者标签 tab )。
内联框架 iframe
HTML内联框架元素表示嵌套的browsing context(浏览器上下文)。它能够将另一个HTML页面嵌入到当前页面中。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe
解释一下:
iframe的name属性可以使window.open() 方法的 windowName 参数值。那么通过window.open()方法指定的资源就会加载到iframe中。
如果没有指定名称,则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。
Window.open的参数
window.open(strUrl, strWindowName, [strWindowFeatures]);
- strUrl === 要在新打开的窗口中加载的URL。
- strWindowName === 新窗口的名称。
- strWindowFeatures === 一个可选参数,列出新窗口的特征(大小,位置,滚动条等)作为一个DOMString。
Window.open的返回值
- WindowObjectReference
打开的新窗口对象的引用。如果调用失败,返回值会是 null 。如果父子窗口满足“同源策略”,你可以通过这个引用访问新窗口的属性或方法。
var windowObjectReference // global variable
function openRequestedPopup() {
windowObjectReference = window.open(
'https://www.baidu.com',
'iframe_name',
'width=420,height=230,resizable,scrollbars=false,status=1'
)
}
openRequestedPopup()
// 调用close()方法1s后关闭窗口
setTimeout(function() {
windowObjectReference.close()
}, 1000)
window.open('/test_open.html', 'windowName', 'height=300, width=400')
setTimeout(function() {
window.open(
'https://www.baidu.com',
'windowName',
'height=300, width=400'
)
}, 1000)
代码执行效果 将/test_open.html资源加载到windowName新窗口下,然后间隔1s钟后, 又调用了 window.open()方法 把百度的资源加载到原有的windowName窗口内,并不会打开一个新窗口。
MDN: 如果已经存在以 WindowName 为名称的窗口,则不再打开一个新窗口,而是把 strUrl 加载到这个窗口中。
HTML <a> 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、
电子邮件地址或任何其他 URL 的超链接。
<a href="https://www.baidu.com" target="windowname">
goTargetWindowName
</a>
window.open("http://www.wrox.com/", "windowname");
以上两段代码达到的效果一致的
本文地址:https://blog.csdn.net/weixin_44811301/article/details/107300322
推荐阅读
-
ajax从JSP传递对象数组到后台的方法
-
photoshop学习网站 php学习笔记 面向对象的构造与析构方法
-
PHP使用mysql_fetch_object从查询结果中获取对象集的方法_PHP教程
-
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧
-
String对象的indexOf方法
-
c# List find()方法返回值的问题说明(返回结果为对象的指针)
-
PHP加密3DES报错 Call to undefined function: mcrypt_module_open 的解决方法
-
Struts2实现对action请求对象的拦截操作方法
-
javascript创建对象的3种方法
-
JavaScript中的Window窗口对象