✽js的快速入门5 window对象

BOM浏览器对象模型:是规范浏览器对js语言的支持(js调用浏览器本身功能)

    BOM的具体实现是window对象

window对象使用

1. 不用new直接进行使用即可,类似Math的使用方式,window关键字可以省略不写

        window.document等等

2. 框体方法

✽js的快速入门5 window对象_第1张图片

✽js的快速入门5 window对象_第2张图片

✽js的快速入门5 window对象_第3张图片




    
    
    windows
    


    
    
    
    

确认框返回[确认true,取消false]

提示框返回[啥也不写返回'',取消返回null,输入内容返回内容]

  3. 定时和间隔执行方法

setTimeout(操作,时间);

setInterval(操作,间隔时间);

将set改为clear就变成了清除

        
    
    
    
    
    

  4. 子窗口方法

 1》子窗口使用 window.opener.postMessage() 方法,父窗口使用window.addEventListener来监听

先看几个这浏览器页面的跳转与设置

// 地址栏属性[window.location.href, window.location.reload();]
        function testLocation(){
            window.location.href='http://www.baidu.com';//js操作,动态修改页面信息,跳转至该页面
        }
        function testLocation2(){
            window.location.reload();// 重新加载资源
        }
        // 历史记录【window.history.forward();,window.history.back();,window.history.go(index);】go0为刷新,
        function testHistory(){
            window.history.forward();
        }
        // 屏幕占比
        function testScreen(){
            var x=window.screen.width;//分辨率
            var y=window.screen.height;
            alert(x+':'+y);
        }
        // 浏览器配置属性
        function testNa(){
            alert(window.navigator.userAgent);
        }
 
    
    
    
    

 父窗口,使用监听器进行监听


子窗口中携带了一个案例【几秒钟后关闭】【打开父页面的控制台即可看到】



    

该页面60秒后关闭

        在上面的代码中,子窗口使用 window.opener.postMessage() 方法向父窗口发送消息。postMessage 方法的第一个参数是要发送的消息内容,第二个参数是目标窗口的原点,使用 '*' 表示可以向任意源发送消息。

        在父窗口中,我们使用 window.addEventListener() 方法来监听 message 事件,当子窗口发送消息时,就会触发该事件的处理程序。在处理程序中,我们可以通过 event.data 属性获取到子窗口发送的消息内容。

2》使子窗口与父窗口同源【域名相同,即发到服务器上,在自己本机做不到】

要实现第二种方法,将父窗口和子窗口设置为相同的域(同源),您可以遵循以下步骤:

        将父窗口和子窗口的 HTML 文件放置在同一个域(同一个域名、协议和端口)下。例如,将它们都放置在http://example.com域下。

        通过域名访问父窗口和子窗口的 HTML 文件。确保父窗口和子窗口的 URL 地址的域名部分相同。

         确保父窗口和子窗口的协议和端口也相同。例如,父窗口是通过http://example.com访问的,则子窗口也应该通过http://example.com访问而不是https://example.com。

        在父窗口和子窗口之间的通信上使用 window 对象的属性和方法,例如 window.opener 。

        请注意,如果您的父窗口和子窗口由不同的应用程序或服务提供,您可能需要进行相应的配置和设置。具体的步骤和操作方式可能因您使用的服务器或应用程序框架而有所不同。

        值得注意的是,如果您正在使用的是本地文件系统(file://),则无法直接通过改变域来避免跨域问题。您可以尝试使用本地服务器来提供您的应用程序,例如使用 Node.js 的 http-server 包或其他类似的工具。

        请确保在实施任何更改之前备份您的代码,并且仅在您了解安全风险并且在可信环境中进行这些更改。

下节是一些案例

你可能感兴趣的:(javascript,开发语言)