web瀏覽器中javascript

標籤：

1、非同步載入一個js代碼
function loadasync(url) {
var head = document.getElementsByTagName("head")[0]; // 找到head節點
var s = document.createElement("script"); // 建立一個script標籤
s.src = url; // 設定一個src屬性
head.appendChild(s); // 插入標籤到head節點中
}
2、事件驅動javascript
2.1 將事件處理函數綁定到目標對象的屬性上
window.onload = function(){};//1
var btn = document.getElementById(‘button‘);//2
btn.onclick = function(){
....
}
function readS(){
.....
}
request.onreadystatechange = readS();//3
以上三種是比較常見的
2.2、事件綁定方式（事件監聽器）
非IE下使用
window.addEventListener(‘load‘,function(){},false);
IE下
window.attachEvent(‘load‘,function(){});
3、onload文檔結構載入完成後執行一個函數
// 註冊一個函數用來在文檔載入完成時執行
// 如果文檔載入完成，非同步運行一個函數
function onLoad(f) {
if (onLoad.loaded) // 如果文檔已經載入完成
window.setTimeout(f, 0); // 放入隊列儘快執行
else if (window.addEventListener) // 綁定事件監聽函數
window.addEventListener("load", f, false);
else if (window.attachEvent) //IE8以下執行
window.attachEvent("onload", f);
}
// 設定一個標記位用來確定文檔是否載入完成
onLoad.loaded = false;
//註冊一個load函數設定載入標記
onLoad(function() { onLoad.loaded = true; });
4、javascript時間軸執行順序
4.1 web瀏覽器建立document對象，並且開始解析web頁面，解析html元素和他們的常值內容後添加element元素和text文本到文檔中！
在這個階段的document.readyState屬性的值是loading.
4.2 當html解析器遇到script沒有設定async和defer的時候，它把元素添加到文檔中，然後執行行內或外部指令碼。這些指令碼會同步執行，並且在指令碼下載和執行時候。解析器會暫停解析。
這樣指令碼就可以用documen.write()方法將內容插入到頁面中。解析器恢複時候這些內容會成為文檔中的一部分，
4.3 當html結構設定了script沒有設定async的時候，它開始下載指令檔，並且繼續解析文檔。指令碼會在它下載完成後儘快執行，但是解析器不會停下來等他下載完成。非同步指令碼禁止使用documen.write()
這種方法。
4.4 當文檔解析完成後document.readyState屬性的值是interactive.
4.5 所有defer指令碼會按照他們在文檔中出現的順序依次執行，這時候非同步指令碼也可能會在這個時候執行，延遲指令碼可以訪問完整的文檔樹結構，禁止使用document.weite()
4.6 瀏覽器在document上觸發DOMContentLoaded事件。這標誌著指令碼從同步執行變成事件驅動階段，注意的是這個時候非同步指令碼可能還會執行。
4.7 這個時候文檔結構解析完成，但是瀏覽器可能還在等待其他內容載入，片。當所有這些完成載入的時候並且非同步指令碼完全載入和執行，document.readyState屬性的值是complete.web瀏覽器觸發window對象上的onload事件！
4.8 從此刻起會調用非同步事件，以非同步響應使用者的輸入，網路，計時器等！
5、IE條件注釋
<!--[if IE 5]>
僅IE5.5可見
<![endif]-->
<!--[if gt IE 5.5]>
僅IE 5.5以上可見
<![endif]-->
<!--[if lt IE 5.5]>
僅IE 5.5以下可見
<![endif]-->
<!--[if gte IE 5.5]>
IE 5.5及以上可見
<![endif]-->
<!--[if lte IE 5.5]>
IE 5.5及以下可見
<![endif]-->
<!--[if !IE 5.5]>
非IE 5.5的IE可見
<![endif]-->
下面的代碼是在非IE瀏覽器下啟動並執行條件注釋
<!--[if !IE]><!--> 您使用不是 Internet Explorer <!--<![endif]-->
<!--[if IE 6]><!--> 您正在使用Internet Explorer version 6或者 一個非IE 瀏覽器 <!--<![endif]-->
6、同源策略
在JavaScript中，有一個很重要的安全性限制，被稱為“Same-Origin Policy”（同源策略）。
這一策略對於JavaScript代碼能夠訪問的頁面內容做了很重要的限制，即JavaScript只能訪問與包含它的文檔在同一域下的內容。
所謂同源是指，網域名稱，協議，連接埠相同。
6.1 不嚴格的同源策略
同源策略會給那些使用多個子網域名稱的網站帶來麻煩，例如a.home.com要訪問b.home.com或者訪問c.sz.home.com的網域名稱的時候就會受到
同源策略的限制。
為瞭解決這個問題可以採用document.domain的屬性，預設情況下domain存放的是載入文檔的伺服器的主機名稱。可以設定這個屬性不過使用的字串
必須具有有效域首碼或者它自己本身。domain的屬性必須有一個點“.”不可以設定如com或者cn。例如上面的a.home.com可以設定成home.com，c.sz.home.com
可以設定成sz.home.com或者home.com.
當我們設定a.home.com、b.home.com、c.sz.home.com的domain為home.com這個時候三者就可以進行資料通訊了。
6.2 不嚴格的同源策略第二項
這個標準已經標準化，這個標準草案用新的Origin要求標頭和新的Access-Control-Allow-Origin回應標頭來擴充http.它允許伺服器顯式的列出源。或使用萬用字元來匹配所有的源
來請求檔案。
6.3 不嚴格的同源策略第三項
跨文檔訊息，允許來自一個文檔的指令碼可以傳遞簡訊到另一個文檔裡的指令碼，而不管指令碼的來源如何。調用window.postMessage()方法
可以非同步傳遞訊息。

 

web瀏覽器中javascript