成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

作為window對象屬性的元素 多窗口和窗體

fredshare / 627人閱讀

摘要：作為對象屬性的文檔元素如果文檔中用屬性為元素命名。其就是交互窗口中的每個窗口窗體都是的執(zhí)行上下文。以對象作為全局對象，這樣的話，一個窗口窗體中的代碼可以應(yīng)用到其他窗口或者窗體并且同源策略沒有進行阻止。

作為window對象屬性的文檔元素

如果html文檔中用id屬性為元素命名。并且如果 window對象沒有此名字的屬性，則window對象會賦予一個屬性，其名字為id屬性的值，其值指向該元素
html

控制臺

window.ming;

由于window對象是作用域鏈的最頂層，即id屬性為腳本訪問的全局變量。如上方的，可以通過變量ming來達到引用此元素的目的。其中button為一個按鈕
但是如果window對象已經(jīng)具有此名字的屬性。不會發(fā)生上述情況，因為ID已經(jīng)被占用。
如果在代碼中聲明并賦值給全局變量x，那么顯示聲明會隱藏隱式聲明的元素變量。如果腳本中的變量聲明出現(xiàn)在命名元素之前，那么變量的存在會阻止元素獲取它的window屬性。如果腳本中的變量聲明出現(xiàn)在命名元素之后，那么變量的顯式會覆蓋屬性的隱式值。即，顯示的是顯式的聲明。
舉一個查找元素id的例子

var ui = ["input", "prompt", "heading"];
ui.forEach((id) => {    // 進行一次循環(huán)
    ui[id] = document.getElementById(id);
    console.log(ui[id]);
});

html




    
    


    
111

    
    
1111

好吧，因為瀏覽器廠商可以隨便給加屬性，導(dǎo)致很容易出現(xiàn)顯式和隱式的問題。所以呢，一般不用，并且輸出的結(jié)果，全是null，沒有該id。
為什么呢。因為script腳本在頭部先進行加載，無法獲得完整的dom樹，導(dǎo)致dom樹獲取全為空值，因為在處理js腳本的時候，dom樹渲染是阻塞的，除非允許異步渲染，加載完成以后進行渲染，或者是異步的隨機渲染。

window.prompt

因為window對象存在該屬性，導(dǎo)致會出現(xiàn)遍歷的失敗

Σ( ° △ °|||)︴

給一個id進行查找

var $ = (id) => { return document.getElementById(id); };
var ui = {};
ui.prompt = $("prompt");
console.log(ui);
多窗口和窗體

一個web瀏覽器有多個標(biāo)簽，每一個標(biāo)簽頁都是一個獨立的瀏覽上下文（即，每一個獨立的標(biāo)簽都是一個線程，有些時候，瀏覽器會進行線程的合并）。每一個標(biāo)簽頁都有一個獨立的window對象。而且相互之間不干擾。每個標(biāo)簽頁中運行的腳本通常并不知道其他便簽頁的存在。更不會和其他標(biāo)簽頁的window對象進行交互操作或者操作其文檔內(nèi)容。
窗口和其他窗口并不是沒有完全的關(guān)系。一個窗口或標(biāo)簽頁中的腳本可以打開新的窗口或者標(biāo)簽頁。當(dāng)一個腳本這樣做，多個窗口可以相互操作

iframe

已經(jīng)處于半廢棄的inframe標(biāo)簽。挺無奈的，已經(jīng)快廢了。
不過學(xué)習(xí)還是學(xué)習(xí)一下吧
iframe是用來嵌套多個文檔的。由iframe所創(chuàng)建的嵌套瀏覽上下文是用自己的window對象表示的。每一個iframe都是一個獨立的window對象。
對于客戶端js來說，窗口，標(biāo)簽頁，iframe和框架都是瀏覽上下文。對于js來說都是window對象。和獨立的不同之處在于，js腳本能夠看到其祖先和子孫

打開和關(guān)閉窗口

使用window的open可以打開一個新的標(biāo)簽頁
window.open將會載入指定的url到新的或者已經(jīng)存在的窗口中（取決于如何設(shè)置）。并返回代表那個窗口的window對象。
open()第一個參數(shù)會在新窗口中顯示文檔的url，如果參數(shù)省，或為空，將會使用空白頁面進行顯示

about:blank

腳本無法通過簡單的猜測窗口的名字來操縱窗口的web應(yīng)用。只有設(shè)置了允許導(dǎo)航的頁面才可以。
即，當(dāng)且僅當(dāng)窗口包含的文檔來自相同的源，或者這個腳本打開的哪個窗口。（或者遞歸打開的窗口），腳本才能通過名字指定存在的窗口，或者如果是一個窗口內(nèi)嵌在另一個窗口里的窗體，那么在它們的腳本之間可以相互導(dǎo)航。使用

_top（頂級祖先窗口）

和

_parent（直接父級窗口）

來獲取上下文。

窗口名字
窗口名字，運行open()方法引用已存在的窗口。并同時可以作為標(biāo)簽a和標(biāo)簽form的taget的值，表示加載到哪

open第三個參數(shù)表明如何打開這個標(biāo)簽的，以及大小（一般彈窗廣告喜歡這樣做）

// 打開允許改變大小的瀏覽器的窗口，包含地址欄，工具欄和地址欄
var w = window.open("http://www.baidu.com/", "smallwin", "windth=200, height=350, statue=yes");

在新的窗口中運行

window.name
"smallwin"

第四個參數(shù)只在第二個參數(shù)命名的時候有用，是在當(dāng)前（原先）窗口是替換掉歷史記錄，還是新建一個歷史記錄，默認是后者，因為要指定名稱，才會在歷史記錄中儲存

窗口的返回值 
var w = window.open();
w.alert("about to visit https://www.google.com.hk/")    // 在新的窗口調(diào)用alert()方法
w.location = "https://www.google.com"    // 設(shè)置窗口的location，完成頁面的跳轉(zhuǎn)

w保存的是跳轉(zhuǎn)網(wǎng)頁的window對象的值

關(guān)閉窗口

如果已經(jīng)使用open()打開窗口，同樣可以用close()關(guān)閉其窗口

w.close();
undefined

這樣可以將w開的窗口將其關(guān)閉
如果要關(guān)閉本窗口可以調(diào)用

close()

這樣就完成了頁面的關(guān)閉
即使一個窗口已經(jīng)關(guān)閉了，那么其window對象仍舊保存在其父窗口，直到父窗口關(guān)閉，window對象徹底的消失。其closed的值為true，并且document的值為null，其方法也不能使用

窗體之間的關(guān)系

window對象的方法open()可以打開并創(chuàng)建一個新的window對象（即創(chuàng)建一個新的窗口）并且該窗口是具有opener屬性，根據(jù)該屬性，可以打開其原始窗口。
即，通過這樣兩個窗口可以實現(xiàn)相互引用。或者調(diào)用對方的方法。
如果一個窗口是頂級窗口，標(biāo)簽
則

parent == self
true

self 屬性返回窗體本身，表明parent指向其窗體
如果一個窗體是在另外一個窗體之中，則parent.parent將會是頂級窗口。不管其嵌套了多少層，包括使用top屬性指向的都是最頂層窗口。
如果window本身就是頂層窗口，則top就是其窗口本身。其top就是parent

交互窗口中的js

每個窗口窗體都是js的執(zhí)行上下文。以window對象作為全局對象，這樣的話，一個窗口窗體中的代碼可以應(yīng)用到其他窗口或者窗體（并且同源策略沒有進行阻止）。那么他們之間可以完成交互。
好啦，不在過多解釋，畢竟這個已經(jīng)沒有什么用的了

window作用域鏈

window對象是客戶端js的全局變量，但是從技術(shù)上不是，web瀏覽器每次向窗口或者窗體載入新的內(nèi)容的時候，都是開始一個新的js執(zhí)行上下文，包含一個新創(chuàng)建的全局對象。事實上，全局對象會在窗口或窗體載入新內(nèi)容時被替換，即window對象實際不是全局對象，是一個代理，即windowProxy

ps 需要注意一點的是在多個標(biāo)簽或者窗體的時候，每個窗體僅僅為一個線程，線程之間使用的是一個瀏覽器定義好的api 即 Window.localStorage 或者是 Cookie 加 輪詢達到多個標(biāo)簽之間的通信的目的。
博客

www.iming.info

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96590.html

相關(guān)文章

  • 前端硬核面試專題之 HTML 24 問

    摘要：前言本文講解前端面試的的內(nèi)容。復(fù)習(xí)前端面試的知識，是為了鞏固前端的基礎(chǔ)知識，最重要的還是平時的積累注意文章的題與題之間用下劃線分隔開，答案僅供參考。返回當(dāng)前文檔的標(biāo)題。改用則可以進行針對性的和避免不必要的。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 1. 前言 本文講解前端面試的 HTML 的內(nèi)容。 復(fù)習(xí)前端面...

    honhon 評論0 收藏0

  • 《同源策略》的簡單介紹

    摘要：概述同源策略是對代碼能夠操作哪些內(nèi)容的一條完整的安全限制，也是由提出的一個著名的安全策略。同源策略的目的同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。 [TOC] 1、概述 同源策略是對JavaScript代碼能夠操作哪些WEB內(nèi)容的一條完整的安全限制，也是由Netscape提出的一個著名的安全策略。所謂同源簡單來說就是三個相同，**1、域名相同2、協(xié)議相同3、端口...

    gggggggbong 評論0 收藏0

  • 《同源策略》的簡單介紹

    摘要：概述同源策略是對代碼能夠操作哪些內(nèi)容的一條完整的安全限制，也是由提出的一個著名的安全策略。同源策略的目的同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。 [TOC] 1、概述 同源策略是對JavaScript代碼能夠操作哪些WEB內(nèi)容的一條完整的安全限制，也是由Netscape提出的一個著名的安全策略。所謂同源簡單來說就是三個相同，**1、域名相同2、協(xié)議相同3、端口...

    vpants 評論0 收藏0

  • 使用 Electron 創(chuàng)建和管理窗體

    摘要：使用創(chuàng)建和管理窗體此系列文章的應(yīng)用示例已發(fā)布于可以或下載后運行查看歡迎中的模塊允許您創(chuàng)建新的瀏覽器窗口或管理現(xiàn)有的瀏覽器窗口每個瀏覽器窗口都是一個單獨的進程稱為渲染器進程這個進程像控制應(yīng)用程序生命周期的主進程一樣，可以完全訪問查看完整 使用 Electron 創(chuàng)建和管理窗體 此系列文章的應(yīng)用示例已發(fā)布于 GitHub: electron-api-demos-Zh_CN. 可以 Clon...

    Brenner 評論0 收藏0

  • 2019秋招知識盲點總結(jié)

    摘要：實際上是一個讓出線程的標(biāo)志遇到會立即返回一個狀態(tài)的。一個簡單的防抖函數(shù)如果定時器存在則清除重新開始定時執(zhí)行缺點只能在最后執(zhí)行，不能立即被執(zhí)行，在某些情況下不適用。假設(shè)壓入棧的所有數(shù)字均不相等。接收數(shù)據(jù)不受同源政策限制。 開始 盡管秋招還沒有拿到offer（好難過），但是一些知識點還是要總結(jié)的，既然自己選了這條路，那就一定要堅定不移的走下去...... 注意 new 運算符的優(yōu)先級 fu...

    Doyle 評論0 收藏0

發(fā)表評論

0條評論

fredshare

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<