日常知識記錄(更新中)

1. 爲什麼用element.style 獲取樣式表的某個屬性時獲取不到?

element.style返回的是一個cssStyleDeclaration對象,只能操作內嵌樣式,對除此以外的樣式應用表的屬性都會忽略。比如,element.style.background= ‘red’,實際操作後的後果是直接給元素添加了內嵌樣式 。由此,引申出下一個問題的思考。

2. 如何獲取樣式表的屬性值

css樣式大致分爲三種:

  • 內嵌樣式:寫在tag裏面,只對當前tag生效,對其他都無效
  • 內部樣式:寫在html裏面,一般是head中的style裏,對當前所在網頁有效
  • 外部樣式:如果樣式表過於複雜,也可能會抽出來寫到一個通用的以’.css’後綴結尾的文件中,再引用到頁面中來。

基於前面實現可知,element.style只能用來獲取和操作內嵌樣式,那麼考慮非內嵌樣式的獲取,查閱資料後發現:

  • window.getComputedStyle 可以用來操作非IE的非內嵌樣式。

    getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式聲明對象([object CSSStyleDeclaration]),只讀。

  • element.currentStyle 可以用來操作IE的非內嵌樣式

綜合考慮,如何用js來獲取css樣式,如果明確樣式是非內嵌樣式:
(ele.currentStyle?ele.currentStyle:window.getComputedStyle(ele,'僞類(沒有寫null)')).attr(考慮IE兼容性)

3. 異步請求回調中新開窗口被瀏覽器視爲廣告而攔截

這個問題我也參考了網上很多的解決方案,最終比較有效的是,在發生請求前先打開一個空標籤,這樣,瀏覽器會認爲這個行爲是用戶的點擊觸發的。等到接收到具體的數據以後,再把新開的空標籤的地址重定向爲獲取到的地址。如果出錯,則再把空標籤關閉。

function click(){ 
  var w = window.open('','_blank');//先打開臨時窗體,由於是點擊事件內觸發,不會被攔截 
  $.ajax({ 
    url:'...',
    ....
    success: function (data) { 
      w.location.href= data.url; //當回調的時候更改臨時窗體的路徑 
    }, 
    error:function(){ 
      w.close(); //回調發現無需打開窗體時可以關閉之前的臨時窗體 
    } 
  }); 
} 

4. 重定向後dom數據獲取問題

這個問題是發生在,前端向後端發起請求之後,後端把接口進行了重定向,之後獲取到的數據可以在頁面上正常的渲染展示。但是,當取dom元素希望獲取該數據時,缺發現無法獲取實際重定向之後獲取的數據。我個人知識淺薄,目前不知道怎麼解決,還請知道的大佬,可以給我點明一下~先提前THX~

5. js 實現記住密碼

js 實現記住密碼,就是利用cookie來進行信息存儲。鑑於現在對這個實現的代碼網上很多,我就不貼了,記錄一下自己碰到的幾個問題:

  1. document.cookie = ‘xxxx’設置失效?

    • chrome處於安全性考慮不能設置本地cookie,網頁文件需要在服務器環境下執行,必須將html文件放置在服務器目錄,如tomcat下, 然後啓動服務器再打開瀏覽器地址欄再訪問。

    • 注意失效時間(expires=xxx),如果失效時間設置成當前時間點那麼document.cookie=”xxxx”的設置也是失效的

    • expires 如果不設置的話,關閉瀏覽器,cookies就失效,所以expires應該和cookie同時寫入:
      document.cookie = type + ‘=’ + escape(name) + ‘; expires=’ + date.toGMTString();

  2. document.cookie = type + ‘=’ + escape(name) + ‘; expires=’ + date.toGMTString();

    • 爲什麼一定要用eascape()?

      因爲cookie限制‘只能用在url中編碼的字符串’,所以用escape吧字符串按url方法來編碼,取值的時候用unescape()來解碼。

    • 日期 toCMTSting()?

      日期的失效時間都是用格林威治時間格式,其他格式都沒用。所以最後要轉化

  3. expires 是不可讀的,所以當你用document.cookie取expires時是取不到的,瀏覽器會自己判斷cookie裏面的內容有沒有過期,一般取得出來的都是未過期的內容。

6. 前端解決跨域的方法

前端解決跨域

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章