UWInfo Blog
發表新文章
[Join] | [忘記密碼] | [Login]
搜尋

搜尋意見
文章分類-darren
[所有文章分類]
  • ASP.NET (24)
  • ASP.NET2.0 (4)
  • ASP.NET4.0 (13)
  • JavaScript (17)
  • jQuery (5)
  • FireFox (2)
  • UW系統設定 (2)
  • SQL (7)
  • SQL 2008 (3)
  • mirror (0)
  • SVN (2)
  • IE (3)
  • IIS (6)
  • IIS6 (0)
  • 閒聊 (1)
  • W3C (4)
  • 作業系統 (3)
  • C# (14)
  • CSS (0)
  • FileServer (0)
  • HTML 5 (7)
  • CKEditor (0)
  • UW.dll (9)
  • Visual Studio (2)
  • Browser (2)
  • SEO (0)
  • Google Apps (1)
  • 網站輔助系統 (1)
  • DNS (0)
  • SMTP (3)
  • 網管 (5)
  • 社群API (3)
  • SSL (1)
  • App_Inventor (0)
  • URLRewrite (1)
  • 開發工具 (2)
  • JSON (0)
  • Excel2007 (0)
  • 試題 (0)
  • LINQ (0)
  • bootstrap (0)
  • Vue (0)
  • IIS7 (2)
  • foodpanda (0)
  • 編碼 (0)
  • 資安 (3)
  • Sourcetree (0)
  • MAUI (0)
  • CMD (0)
  • my sql (1)
所有文章分類
[darren的分類]
  • ASP.NET (48)
  • ASP.NET2.0 (15)
  • ASP.NET4.0 (34)
  • JavaScript (49)
  • jQuery (26)
  • FireFox (4)
  • UW系統設定 (3)
  • SQL (39)
  • SQL 2008 (25)
  • mirror (4)
  • SVN (4)
  • IE (9)
  • IIS (20)
  • IIS6 (1)
  • 閒聊 (7)
  • W3C (6)
  • 作業系統 (9)
  • C# (24)
  • CSS (12)
  • FileServer (1)
  • HTML 5 (11)
  • CKEditor (3)
  • UW.dll (13)
  • Visual Studio (16)
  • Browser (8)
  • SEO (1)
  • Google Apps (3)
  • 網站輔助系統 (4)
  • DNS (5)
  • SMTP (4)
  • 網管 (11)
  • 社群API (3)
  • SSL (4)
  • App_Inventor (1)
  • URLRewrite (2)
  • 開發工具 (6)
  • JSON (1)
  • Excel2007 (1)
  • 試題 (3)
  • LINQ (1)
  • bootstrap (0)
  • Vue (3)
  • IIS7 (3)
  • foodpanda (2)
  • 編碼 (2)
  • 資安 (3)
  • Sourcetree (1)
  • MAUI (1)
  • CMD (1)
  • my sql (1)
最新回應
  • IIS ARR (reverse proxy) 服務安裝
    ...more
  • UW DB 元件罕見的錯誤
    我之前好像也遇過, 考慮改一下 pg 的程式....more
  • UW DB物件 GetAllDataFromBaseTableWithCache 會嚴重影響效能
    我把它拿掉了....more
  • UW DB物件 GetAllDataFromBaseTableWithCache 會嚴重影響效能
    好, 把它拿掉.....more
  • 使用 facebook JS SDK 的心得筆記
    FB.login 沒有任何反應~ 不知道怎解決...more
  • IIS Server SSL 升級方式
    更新一版 reg 可以變 A...more
  • 防止 event 往上傳的終極方法
    eee...more
  • IIS Server SSL 升級方式
    Cool......more
  • UNT流量異常追蹤紀實
    有做 Request 的來源 IP 分析嗎 ? 說不定會有其它的發現.....more
  • facebook 網頁分享 Debug 模式
    Header 裡面的兩個 tag.. <meta property="og:i...more
標籤
  • 404.17
  • 8
  • web
  • Chrome[t]
  • C
  • pdb
  • HTTP 錯èª
  • wShlRAcB
  • ggx4yzki
  • 16
  • images
  • ti
  • SqlCacheDe
  • TCP
  • separatedi
  • output[t]
  • .
  • 0
  • tim
  • Image
  • en
  • Rf,
  • Fortigate
  • SQLBuilder
  • 8419
  • AD
  • editor
  • 8220-8205
  • Contains-f
  • Json.NET
  • [u2]
  • WU
  • 426
  • bdodo
  • 230
  • KERNELBASE
  • data
  • minvalue[t
  • 三元
  • rank
  • Cache
  • [t]
  • 5550
  • 命名
  • 403 - forb
  • 412
  • 26
  • client
  • 740
  • z-index
搜尋 結果:
使用IntersectionObserver API 實作 Lazy load
過去都是使用 jquery lazy load js 來實作延遲載圖,
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式,就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;

if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
     entries.forEach(function(entry) {
        if (entry.isIntersecting) {
         let lazyImage = entry.target;
         lazyImage.src = lazyImage.dataset.src;
         lazyImage.srcset = lazyImage.dataset.srcset;
         lazyImage.classList.remove("lazy");
         lazyImageObserver.unobserve(lazyImage);
        }
     });
    });

    lazyImages.forEach(function(lazyImage) {
     lazyImageObserver.observe(lazyImage);
    });
}
//這裡可以加上else處理萬一瀏覽器不支援的狀況
});


網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援,iOS safari 要 12.2 版才支援
應該可以放心使用


 
More...
darren, 2019/4/3 下午 07:48:07
跨 domain iframe 網頁的 javascript 互通API
這是一個老問題,當開啟的網頁是另一網站時,javascript 是不能互通呼叫的 
因此 W3C 制訂的 HTML5 Web Message 規格,讓跨站網頁可以互通訊息
http://www.w3.org/TR/webmessaging/
https://html.spec.whatwg.org/multipage/comms.html#web-messaging

Can I Use 查詢發現幾乎所有瀏覽器都支援了, Good!
http://caniuse.com/#search=postMessage

Youtube 就依此標準做出工具,讓砍入 iframe Youtube 影音的網頁可以互動
例如上層網頁就可以控制 iframe 裡的影音的音量、暫停等
https://developers.google.com/youtube/iframe_api_reference
More...
darren, 2015/3/26 下午 03:25:24
facebook 網頁分享 Debug 模式
當我們網站裡的某個網址要分享到 facebook 時,
facebook 會主動到我們網頁擷取內容,然後存在cache裡
facebook 給開發人員一個頁面可以測試看看結果
https://developers.facebook.com/tools/debug/og/object/ 
可以貼上自己網站的某個網址 ex.
http://www.shopunt.com/eng/unreal-touch-mineral-powder-blush/p/1129/c/34
就可以看到 facebook 爬到的結果,如果上次爬的是很久以前,這個地方也可以重新爬一次

----------------------------------------------------------------
經由測試結果,發現這功能出現的圖片,跟實際上在網站裡點fb分享出現的內容還是有差異
想出現的圖片還是不能控制,根據[此文章]說明
要把 og: 所有屬性都加上才行
header 圖片部分最好再加上
<link href="圖片連結網址" rel="image_src" type="image/jpeg">

應該就能保證分享圖片是自己想要的。 --> 這有空再來測試好了
 
More...
darren, 2014/8/13 下午 07:32:59
form 的 reset 功能對 hidden field 無作用
一般正常來說 如果要網頁的表單(Form) 做資料清除的動作
只要下 reset() 指令就可
document.getElementById("form1").reset();

但是對於 hidden field
<input type='hidden' name='txtId' value='xxx' />

這個方法是沒有作用的 資料還是在

兩個方法解決:
1. reset 之後再各自去清掉 hidden field 的 value (有點笨)
2. 不要用 hidden field 改用 display:none 的 DIV 去包要隱藏的 field
 
More...
darren, 2014/7/10 上午 10:23:38
網頁呼叫 Line 的說明
*** 分享按鈕的做法 ***
http://media.line.me/howto/zh-hant/

*** 讓其他人可以加入你成為好友,或已是好友可以直接傳訊息 **
- 請到個人資料找出"行動條碼",會有一組 QR Code
  QR Code 內容是 URL, 轉成文字就像是 http://line.me/ti/p/TLVcRv52Ps
  請另外用 QR Code 掃描軟體把他拍下來查看文字就可以得到 Url
- 網頁上只要用一般的連結方式 把這個 URL 放進去
 
<a href="http://line.me/ti/p/TLVcRv52Ps">連絡我</a>

 若 user 手機有安裝 Line App 就會叫起 Line 加入好友並可以傳訊息
 
More...
darren, 2014/5/23 下午 03:45:22
整理一下最近 IE9 (或以下) 的問題,順便補一個 Firefox 的問題
IE一直到 IE10 才比較支援一般正常瀏覽器的功能
IE9 以下常常要做一些特別的處理 稍微整理一下

1. input, textarea 的 "placeholder" 屬性,IE10 以上才支援,建議偵測 IE9 以下版本時,特別跑 js 用 onfocus, onblur    來處理

    function setPlaceholder(e) {
        var placeholder = $(this).attr('placeholder');
        if ($(this).val().length == 0) {
            $(this).css("color", "#b2b2b2").val(placeholder);
        }

        $(this).focus(function (e) {
            if ($(this).val() == placeholder) { $(this).css("color", "#666").val(""); }
        });

        $(this).blur(function (e) {
            if ($(this).val().length == 0) { $(this).css("color", "#b2b2b2").val(placeholder); }
        });
    }

    if (Is_LTE_IE9) {
        $('input[placeholder]').each(setPlaceholder);
        $('textarea[placeholder]').each(setPlaceholder);
    }


2. <input type=file /> 不能用 js 去 click,必須要user真的去點他, js 才抓得到檔案,不然傳到server也是空的
   
3. IE9 的 js console.log 必須在 "偵錯模式" 下才能使用,所以js程式完成後,要記得把 console.log 清掉或是註解掉
   不然一般 IE9 的 User 會跳出 js 的錯誤,然後 js 就停了。(這個問題必須在純IE9的瀏覽器才能發現,IE10模擬IE9也發    現不到)

4. Firefox 問題: 當我們要算div的寬高時,他本身必須 display:block 才能算的出來,不然會是 0,
   但是 Firefox 連隱藏iframe 裡的 html > div 都會回傳 0,必須把 iframe 設為 display:block;visibility:hidden
  才能算出裡面div的寬高
 
More...
darren, 2013/11/15 上午 10:13:29
使用 Drag Drop 將檔案放入網頁上傳檔案 (HTML5)
  • How to Use HTML5 File Drag & Drop
  • How to Open Dropped Files Using HTML5 and JavaScript
  • How to Asynchronously Upload Files Using HTML5 and Ajax
  • How to Create File Upload Progress Bars in HTML5 and JavaScript

這幾篇文章提到使用拖拉方式將檔案放到網頁裡面
然後在本地端預覽,然後ajax上傳,上傳時還有 progress bar
一整套運作模式說明,並附上sample code,挺棒的
附檔sample code

-------------------------------------------
測試後補充:
1. 範例中的 dragover event 要改成 dragenter 比較正確
然後 dragover 最好是做成 return false (ev.stopPropagation())
2. Server端不能用Requst.Files收檔案,要直接處理 Request.InputStream另存成檔案

 
More...
darren, 2012/10/7 上午 01:20:42
~ Uwinfo ~