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

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屬性獲取不到此元素，form與img獲取到了
  3. 在當前文件裡任何元素有id屬性，就可以

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

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

相關文章