原來很多元素我們可以直接訪問

weixin_33807284發表於2018-09-07

這兩天在幫其他專案組的同事做專案,他們使用layui,在使用模板時產生了一個疑問,先上程式碼

var getTpl = tpl_crumbs_list.innerHTML

tpl_crumbs_list沒有在js裡面定義,只在頁面上寫了一個<script id="tpl_crumbs_list" type="text/html">...</script>標籤,layui是如何獲取到變數tpl_crumbs_list的呢????
先到console輸入tpl_crumbs_list,咔還真沒報錯,也不是undefined,好神奇啊,是不是layui遍歷了所有的script,將所有非普通type的script都設為全域性變數了,先搜script,好像沒有,再搜id也沒有,靠靠靠,什麼情況,給layui.js加斷點,一個函式一個函式執行,跑到最後tpl_crumbs_list,也是還是沒值啊
猜想很有可能與layui沒有關係,只要元素有id,就可以通過window[id內容]獲取到此元素,在百度頁面實驗了一下

clipboard.png

果然如此

上百度,好不容易找到了Named access on the Window object

clipboard.png
上來就說這是非常規標準定義,使用此API會使程式碼脆弱不健壯,建議使用document.getElementById()或者document.querySelector()方法
自我感覺英語還行,但讀起規範來總感覺力不從心

clipboard.png

主要有下面三種情況

  1. 子瀏覽內容(比如iframe)有name屬性
  2. 在當前文件裡下面元素有name屬性, a, applet, area, embed, form, frameset, img, object,我自己實驗了幾個,發現a便籤上有name屬性獲取不到此元素,formimg獲取到了
  3. 在當前文件裡任何元素有id屬性,就可以

下面還有一段看起來費勁,這個方法也不是好方法就不看了,大致可以得到下面結論
iframe, applet, form, img, object等元素有name屬性,可以通過window[name值]獲取到該元素,任何當前文件元素有id,可以通過window[id值]獲取該元素

賢心大神威武,又知道一個小竅門

相關文章