JS 瀏覽器視窗控制

阿新 • • 發佈：2021-01-14

業務場景：老系統裡（非SPA）在主頁面有很多子模組頁面，在點選去到子模組a頁面開啟新視窗，如果a頁面已經在瀏覽器開啟則不開啟新的視窗，切換至a頁面視窗

首先，瞭解window物件
1.window.open

window.open('http://www.baidu.com') //開啟一個新頁面 返回開啟的window物件本身

2.window.focus()

window.focus() //聚焦到當前頁面

3.window.closed

window.closed  //可以拿到 window的開啟關閉狀態  true關閉  false開啟

然後梳理思路

1.判斷頁面是否被開啟，以及頁面的開啟關閉狀態closed 
2.開啟一個新的頁面時，存放被開啟的window物件// obj[url] = window.open(url)
3.開啟一個已經開啟的頁面時， focus()聚焦到該頁面 //obj[url].focus()

最後code

    <body>
    <button message="kk" class="pink" onclick="openBrowser('b')">click to B</button>
    < 
button message="kk" class="pink" onclick="openBrowser('c')">click to C</button>
    <script>
      // # 切換到當前最新開啟的視窗
      var objWin = {};
      function openBrowser(url) {
        let target;
        if (url == "b") {
          target = "http://127.0.0.1:5500/bhref.html" 
;
        } else {
          target = "http://127.0.0.1:5500/chref.html";
        }
        //判斷是否開啟
        console.log(objWin[url]);
        if (objWin[url] == null || objWin[url].closed) {
        //新開啟的頁面window存起
          objWin[url] = window.open(target);
          console.log(objWin[url]);
        } else {
       	//已經開啟的頁面 直接聚焦切換
          objWin[url].focus();
        }
        console.log(objWin);
      }
    </script>
  </body>

丟擲問題：如果使用者重新整理頁面，儲存的變數都被清除了，功能失效

你一定會想，存到storage裡面不就好了，直接給出結論:json轉字串出現 迴圈引用問題

sessionStorage.setItem('objWin',JSON.stringify(objWin)) //Error
JSON.stringify出現 “Converting circular structure to JSON

待續…

JS 瀏覽器視窗控制

技術標籤：應用場景windowjswebjavascript 業務場景：老系統裡（非SPA）在主頁面有很多子模組頁面，在點選去到子模組a頁面開啟新視窗，如果a頁面已經在瀏覽器開啟則不開啟新的視窗，切換至a頁面視窗

python 獲取瀏覽器視窗控制代碼

使用 selenium 獲取視窗控制代碼 from selenium import webdriver import time # chromedriver的絕對路徑

js 瀏覽器視窗重新整理、關閉事件

1、beforeunload 當瀏覽器視窗關閉或者重新整理時，會觸發beforeunload事件。當前頁面不會直接關閉，可以點選確定按鈕關閉或重新整理，也可以取消關閉或重新整理。

Python獲取瀏覽器視窗控制代碼過程解析

控制代碼（handle）是C++程式設計中經常提及的一個術語。它並不是一種具體的、固定不變的資料型別或實體，而是代表了程式設計中的一個廣義的概念。控制代碼一般是指獲取另一個物件的方法——一個廣義的指標，它的具體

web自動化學習02——瀏覽器視窗控制

在使用python+selenium操作瀏覽器時，有時需要控制瀏覽器視窗的位置和大小：瀏覽器大小有三種方式：

vue.js監聽瀏覽器視窗寬度變化

首先在data中定義要監聽的屬性，因為watch偵聽器監聽的是data中的屬性,不能直接監聽window

《SeleniumBasic 3.141.0.0 - 在VBA中操作瀏覽器》系列文章之十一：視窗控制代碼與視窗切換

一個瀏覽器可能開啟多個網頁視窗。Selenium中每個視窗都有一個控制代碼，控制代碼是一個文字字串。Selenium在任何時刻只能操作和讀寫1個視窗，要操作其他視窗必須用SwitchTo切換進去。

前端js使瀏覽器視窗全屏與退出----瀏覽器全屏時監測通過esc按鍵退出全屏

vue專案專案分為頂部導航、側邊導航、以及右邊mainContent區域需求是讓專案的其中一個頁面有全屏功能並且在全屏時隱藏掉頂部的頂導航欄

JS實現音量控制拖動

本文例項為大家分享了JS實現音量控制拖動的具體程式碼，供大家參考，具體內容如下

python GUI庫圖形介面開發之PyQt5視窗控制元件QWidget詳細使用方法

QWidget基本介紹基礎視窗控制元件QWidget類是所有使用者介面物件的基類，所有的視窗或者控制元件都直接或者間接的繼承自QWidget類。

JS實現可控制的進度條

寫在前面進度條一直以來都是很多地方都可以用的，那麼很多的時候其實我們都是自己在網上找程式碼，直接使用的，很少有人自己寫原始碼的，今天呢我們就簡單的實現一個進度條的效果，沒有做美化，喜歡做美化的可以自己

Vue專案頁面跳轉時瀏覽器視窗上方顯示進度條功能

在vue專案中，為了減少首屏載入的時間，通常會開啟路由的懶載入。路由懶載入配合gizp確實能幫助我們大大的加快首屏的載入時間。

JS瀏覽器BOM常見操作例項詳解

本文例項講述了JS瀏覽器BOM常見操作。分享給大家供大家參考，具體如下： window尺寸

JS 瀏覽器BOM-->Window confirm() 方法

1.定義和用法　　confirm()方法用於顯示一個帶有指定訊息和確認及取消按鈕的對話方塊。

JavaScript-Runoob-JS 瀏覽器BOM ：JavaScript Window Location

ylbtech-JavaScript-Runoob-JS 瀏覽器BOM ：JavaScript Window Location 1.返回頂部 1、 JavaScriptWindow Location

JavaScript-Runoob-JS 瀏覽器BOM ：JavaScript 即使事件

ylbtech-JavaScript-Runoob-JS 瀏覽器BOM ：JavaScript 即使事件 1.返回頂部 1、 JavaScript計時事件

js：流程控制（分支結構、順序結構、迴圈結構）

1、流程控制通過控制程式碼的執行順序來實現我們完成的功能，js中流程控制有三種結構

解決vue單頁面多個元件巢狀監聽瀏覽器視窗變化問題

需求最近公司有個大屏展示專案（如下圖）頁面的元素需要做響應式監聽，圖表需要跟著視窗響應變化

js 一個按鈕控制背景音樂的開關

css部分 1 <style> 2 3 .open { 4width: 50px; 5height: 50px; 6background: #fff url(https://images.cnblogs.com/cnblogs_com/jiong-ling/1818899/t_2008021215371.png) no-repeat;

偽類隨著瀏覽器視窗大小變更，改變寬度（resize）

偽類隨著瀏覽器視窗大小變更，改變寬度（resize），偽類樣式的更改 css .plan_wrapper .plan_com:not(:last-child)::after{

JS 瀏覽器視窗控制

相關推薦