分類目錄歸檔:Javascript

談談瀏覽器 iframe 跨域 的沙盒模式

眾所周知,現代的瀏覽器通過iframe調用不同域下的頁面,會觸發沙盒模式,比如: a.com/a.html iframe內框 b.com/b.html,b.com/b.html 的內頁無法通過js操作 a.com/a.html。這樣做可以 防止跨域攻擊,使網絡訪問更安全。如果更復雜的模式,比如 a.com/a.html iframe內框 b.com/b.html,b.com/b.html iframe內框 a.com/c.html,這時 a.com/c.html 可以訪問 a.com/a.html嗎?估計這個大部分人就都不知道了,做一個簡單的實驗:
1、http://www.dezaoju.com/sanbox/ 內嵌 http://www.shuodahua.com/sanbox/
2、http://www.shuodahua.com/sanbox/ 內嵌 http://www.dezaoju.com/sanbox/frame.html
經過測試,無論內嵌多少層,只要是同域的 頁面,測試 IE、Chrome、Firefox 都不會觸發 sanbox
繼續閱讀

淺談 JS 復制

最近幫朋友做了個簡單的小程序,需要點擊按鈕實現復制?用戶名的功能,使用? window.clipboardData?實現了?IE?下的復制功能,遇到?Chrome?就沒辦法了。百度發現了?Zepto.js,非常好用。

周末閑來無事,發現Chrome/Firefox?支持?Window.getSelection,做了簡單的封裝,替換掉?Zepto.js,有簡化掉了很多代碼。

代碼比較簡單,測試地址:http://www.shiekolong1185.icu/products/copy.html,代碼如下: 繼續閱讀

FrameController.js – 優雅的處理單頁多框架(iframe)窗口管理同步問題

做后臺時,不可避免的會遇到 內嵌 iframe 的情況。最近的 一個項目 有客戶反饋無法保存,提示 token 錯誤,。經過溝通發現 是因為打開了 多個內嵌頁(iframe),會出現此問題(使用ThinkPHP5自帶方法 token(),每次調用都會生成新的Token)。修復方法也很簡單,直接在 新增內嵌頁時,將新生成的token進行廣播。

這種情況在 后臺 開發中會經常遇到,把 代碼 提取出來,做了一下簡單的封裝,做成開源項目(https://gitee.com/mqycn/FrameController.js)。

考慮到后臺可能要兼容非常老的平臺,特別針對 IE7、IE8 做了兼容處理,基本可以實現所有瀏覽器的兼容。運行效果如下: 繼續閱讀

一個腳本學會 Promise

感覺之前 對 Promise 理解錯誤(見之前 2016年的文章:http://www.shiekolong1185.icu/p/promise),今天周末,抽時間看了 Promise 的文檔,確實時理解差太多了。

粗略的看了一個文檔,簡單的了解了 Promise使用。對于 react-native 中的 API 項目,非常適用( 其實fetch就是一個 Promise實例)。

用 Promise 定義好接口,調用時 最好能統一處理錯誤,規范為 設計好的數據格式。 文檔中 沒有 catch 后,能否返回 then的方法。測試結果不能,因為 調用 catch 后,已經時resolved了。如果 catch 繼續返回一個 新的 Promise,按 定義的 數據格式,返回一個錯誤的json, 無視錯誤,繼續操作就完美了。嘗試寫了一個腳本,實現了我的想法。腳本如下: 繼續閱讀

原創的jQuery插件:jQueryValidateQY(基本功能已經完成)

最近的項目(手機站),需要實現個前端校驗功能,比如大名鼎鼎的 jQuery.validate 插件,太過基礎,不能滿足現在的需求。另外一點就是 想前后端共用校驗規則。

嘗試自己寫了一個,基于 jQuery,實現了:

1、無論成功或者失敗,輸入框自動變色(失敗為紅色,成功為綠色)
2、如果輸入出錯,自動彈出錯誤提示層
3、錯誤、正確的樣式,可以通 繼續閱讀