過去都是使用 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 版才支援
應該可以放心使用


 

這是一個老問題，當開啟的網頁是另一網站時，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

一般在製作手機版或是自適應性網站時會加一個meta tag: <meta name="viewport" content="width=device-width,initial-scale=1.0">
但是這樣在IOS系統時，字體的大小會隨著螢幕轉向(螢幕解析度改變)而變大或縮小



解決辦法： 在css的body中加入"-webkit-text-size-adjust:100%;"

當我們網站裡的某個網址要分享到 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">

應該就能保證分享圖片是自己想要的。 --> 這有空再來測試好了
 

一般正常來說 如果要網頁的表單(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
 

*** 分享按鈕的做法 ***
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 加入好友並可以傳訊息
 

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的寬高
 

• 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另存成檔案

 

先記在這, 有空再來研究一下它的程式碼. 看樣子 HTML 5 有很多值得研究的東西.

http://www.pasteshack.net/

在 Chrome 中, 可以直接把圖片用 ajax 傳到 Server 上. 請參考 在 Chrome 中, 直接把剪貼簿中的圖片用貼上的方式上傳到 Server 但若是要在 CKEditor 中貼上圖片, 會遇到一些問題, 主要的原因是 Past Event 綁定的方法不太一樣: 其中 ".<% = me.txtContent.ClientId %>"  要換成 textarea 的 id

$(document).ready(function () {

CKEDITOR.replace('<% = me.txtContent.ClientId %>', {

on: {

instanceReady: function (ev) {

this.dataProcessor.writer.setRules('p', {

indent: false, //縮排

breakBeforeOpen: true, // <P>之前是否換行

breakAfterOpen: true, // <P>之後是否換行

breakBeforeClose: false, // </P>之前是否換行

breakAfterClose: true // </P>之後是否換行

});

}

},

toolbar: 'basic'

});

});



$(document).ready(function () {

if (parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1]) >= 12) {

function bindPasteInCK() {

$("iframe").contents().find("body").bind('paste', imagePasteOnPaste);

}



CKEDITOR.instances.<% = me.txtContent.ClientId %>.on("instanceReady", bindPasteInCK);

}

});

參考資料: http://fogbugz.stackexchange.com/questions/8744/bugmonkey-paste-image-into-case-what-does-wiki-do-with-images