顯示具有 javascript 標籤的文章。 顯示所有文章
顯示具有 javascript 標籤的文章。 顯示所有文章

2015年11月28日 星期六

addEventListener、attachEvent

在別的程式中看到, 建立一個iframe, 並且addEventListener "load" , 然後在執行 handleResult function.
這邊有詳細解說

if(!ajaxframe) { var div = document.createElement('div'); div.style.display = 'none'; div.innerHTML = '<iframe name="' + ajaxframeid + '" id="' + ajaxframeid + '" loading="1"></iframe>'; $('append_parent').appendChild(div); ajaxframe = $(ajaxframeid); } else if(ajaxframe.loading) { return false; } _attachEvent(ajaxframe, 'load', handleResult); function _attachEvent(obj, evt, func, eventobj) { eventobj = !eventobj ? obj : eventobj; if(obj.addEventListener) { obj.addEventListener(evt, func, false); } else if(eventobj.attachEvent) { obj.attachEvent('on' + evt, func); } }

2015年7月1日 星期三

用Js setAttribute 寫css 速度差異.

用Js 寫css 速度差異. http://jsfiddle.net/XmW49/455/
var thing = document.getElementById("first"); console.time("first"); thing.setAttribute("style", "width: 100px; height: 100px; background-color: block;"); console.timeEnd("first"); var thing3 = document.getElementById("thing-3"); console.time("green"); thing3.style.cssText = "width: 100px; height: 100px; background-color: green;"; console.timeEnd("green"); var thing = document.getElementById("thing-4"); console.time("blue"); thing.style.width = "100px"; thing.style.height = "100px"; thing.style.backgroundColor = "blue"; console.timeEnd("blue"); var thing2 = document.getElementById("thing-2"); console.time("yellow"); thing2.setAttribute("style", "width: 100px; height: 100px; background-color: yellow;"); console.timeEnd("yellow"); var thing1 = document.getElementById("thing-1"); console.time("red"); thing1.setAttribute("style", "width: 100px; height: 100px; background-color: red;"); console.timeEnd("red"); console.log('---------');

Result :
first: 0.13ms
green: 0.15ms
blue: 0.11ms
yellow: 0.08ms
red: 0.06ms

心得:  第一次執行的, 都明顯偏慢. 但是當調換 thing-* 的執行順序, 結果又不近相同. 看來這種設定 css 方法, 若是多次執行, 可能會變很快吧.(ps: 謝謝提醒, 改變了做法.)

2015年4月20日 星期一

[javascript] Call , Apply , Bind 用法

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Apply: 來源

function callMe(arg1, arg2){ var s = ""; s += "this value: " + this; s += "<br>"; for (i in callMe.arguments) { s += "arguments: " + callMe.arguments[i]; s += "<br />"; } return s; } document.write("Original function: <br/>"); document.write(callMe(1, 2)); document.write("<br/>"); document.write("Function called with apply: <br/>"); document.write(callMe.apply(3, [ 4, 5 ])); // Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5
Bind:來源
// 範例一 var checkNumericRange = function (value) { if (typeof value !== 'number') return false; else return value >= this.minimum && value <= this.maximum; } // The range object will become the this value in the callback function. var range = { minimum: 10, maximum: 20 }; // Bind the checkNumericRange function. var boundCheckNumericRange = checkNumericRange.bind(range); // Use the new function to check whether 12 is in the numeric range. var result = boundCheckNumericRange (12); document.write(result); // Output: true // 範例二 // Create an object that contains the original function. var originalObject = { minimum: 50, maximum: 100, checkNumericRange: function (value) { if (typeof value !== 'number') return false; else return value >= this.minimum && value <= this.maximum; } } // Check whether 10 is in the numeric range. var result = originalObject.checkNumericRange(10); document.write(result + " "); // Output: false // The range object supplies the range for the bound function. var range = { minimum: 10, maximum: 20 }; // Create a new version of the checkNumericRange function that uses range. var boundObjectWithRange = originalObject.checkNumericRange.bind(range); // Check whether 10 is in the numeric range. var result = boundObjectWithRange(10); document.write(result); // Output: true // 範例三 // Define the original function with four parameters. var displayArgs = function (val1, val2, val3, val4) { document.write(val1 + " " + val2 + " " + val3 + " " + val4); } var emptyObject = {}; // Create a new function that uses the 12 and "a" parameters // as the first and second parameters. var displayArgs2 = displayArgs.bind(emptyObject, 12, "a"); // Call the new function. The "b" and "c" parameters are used // as the third and fourth parameters. displayArgs2("b", "c"); // Output: 12 a b c
Call:來源
function callMe(arg1, arg2){ var s = ""; s += "this value: " + this; s += "<br />"; for (i in callMe.arguments) { s += "arguments: " + callMe.arguments[i]; s += "<br />"; } return s; } document.write("Original function: <br/>"); document.write(callMe(1, 2)); document.write("<br/>"); document.write("Function called with call: <br/>"); document.write(callMe.call(3, 4, 5)); // Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with call: // this value: 3 // arguments: 4 // arguments: 5

2014年10月27日 星期一

css and javascript 防止文字被選取.

<body style="-moz-user-select: none;" onselectstart="return false" oncontextmenu="return false" ondragstart="return false" >

2014年10月16日 星期四

[小技巧]javascript 用object 帶入 參數.


使用方法: 
$.payment.validateCardExpiry('xx','xx'); var object = {'month':'xx','year':'xx'}; $.payment.validateCardExpiry(object);
#coffee code $.payment.validateCardExpiry = (month, year) -> # Allow passing an object if typeof month is 'object' and 'month' of month {month, year} = month #js code $.payment.validateCardExpiry = function(month, year) { var currentTime, expiry, _ref; if (typeof month === 'object' && 'month' in month) { _ref = month, month = _ref.month, year = _ref.year; }

2014年9月23日 星期二

Javascript 重要的五的考題.

來源: http://www.sitepoint.com/5-typical-javascript-interview-exercises/

1.Scope
(function() { var a = b = 5; })(); console.log(b);

Ans: 5 , 因為 b 沒用 var , 等同於 var a = window.b = 5 ; (function() { 'use strict'; var a = window.b = 5; })(); console.log(b); 

2: Create “native” methods 
console.log('hello'.repeatify(3));

Ans: String.prototype.repeatify = String.prototype.repeatify || function(times) { var str = ''; for (var i = 0; i < times; i++) { str += this; } return str; };

3: Hoisting
function test() { console.log(a); console.log(foo()); var a = 1; function foo() { return 2; } } test();

Ans: undefined and 2.
function test() { var a; function foo() { return 2; } console.log(a); console.log(foo()); a = 1; } test();

4: How this work in JavaScript
var fullname = 'John Doe'; var obj = { fullname: 'Colin Ihrig', prop: { fullname: 'Aurelio De Rosa', getFullname: function() { return this.fullname; } } }; console.log(obj.prop.getFullname()); var test = obj.prop.getFullname; console.log(test());

Ans: Aurelio De Rosa and John Doe.
因為第二種方式, this 被指到 window 了.

5: Use call() and apply()

Ans: console.log(test.call(obj.prop));

2014年8月5日 星期二

IE6 ~ IE11 useragent 格式 與 檢查是否為IE

可以在console 模式下 打 navigator.userAgent 即可得到.


 提供一個方法去監測ie. 
 var IS_MSIE = /msie|trident.*rv/.test(navigator.userAgent.toLowerCase());
 然後透過 $.browser.version可以得到版本,好像ie7 不準. ($.browser 在 jQuery 1.9 以後移除).
補充:
var IS_FIREFOX = /firefox/.test(navigator.userAgent.toLowerCase())

var IS_SAFARI  = /safari/.test(navigator.userAgent.toLowerCase()) && !/chrome/.test(navigator.userAgent.toLowerCase()) 相關聯結: [jQ]jQuery.browser.version 在 IE 中版本判斷的 Bug

 
 以下為IE 6 ~ 11 的 userAgent


Internet Explorer 11

  • Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; BRI/2; NP06; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

Internet Explorer 10.6

Internet Explorer 10.0

Internet Explorer 9.0

Internet Explorer 8.0

Internet Explorer 7.0b

Internet Explorer 7.0

Internet Explorer 6.1

Internet Explorer 6.01

Internet Explorer 6.0b

Internet Explorer 6.0

2014年7月22日 星期二

[Javascript] 寫出好品質的code


來源

JavaScript uses functions to manage scope.
這些都是 Global variable
myglobal = "hello"; // antipattern console.log(myglobal); // "hello" console.log(window.myglobal); // "hello" console.log(window["myglobal"]); // "hello" console.log(this.myglobal); // "hello" 

這樣不好:
function sum(x, y) { // antipattern: implied global result = x + y; return result; }

需改成這樣:
function sum(x, y) { var result = x + y; return result; }

這樣不好: because a is local but b becomes global
function foo() { var a = b = 0; // ... }

需改成這樣:
var a = (b = 0); // or  function foo() { var a, b; // ... a = b = 0; // both local } 

待續... 

2014年1月8日 星期三

IE8 以下 不支援 Object.keys

新增下列程式來解決這個問題:

Object.keys = Object.keys || function(o) {

    var result = [];

    for(var name in o) {

        if (o.hasOwnProperty(name))

          result.push(name);

    }

    return result;

};

來源: http://whattheheadsaid.com/2010/10/a-safer-object-keys-compatibility-implementation

2013年10月9日 星期三

[JavaScript] 練習內定物件與函式: arguments, callee, caller, this, apply(), call()

  • callee
    此為arguments的屬性之一,可取得被call function本身。
  • caller
    可用來取得call該function的來源物件。
  • this
    指到函數的擁有者(Owner)。
  • apply()與call()
    apply與call兩者本身的功能相同,都可以用來特別指定被call function中的this變數。
    不同之處在於傳入參數的寫法不同:

    apply( thisArg, argArray ); // 第二個參數必須是個Array,否則會產生參數型態錯誤的Error
    call( thisArg[, arg1, arg2…] );

 var t = function(){ this.s = 1; log('========================'); log( arguments ); // 實際傳入的參數陣列 log( arguments.callee ); // 指到methodA log( arguments.callee.caller ); // 指到call methodA的object log( 'new Length: '+arguments.callee.length ); log( 'rellay length: '+arguments.length ); log( this.s ); this.a = function () { this.s = 2; this.len = arguments.length; log('========================'); log( arguments ); // 實際傳入的參數陣列 log( arguments.callee ); // 指到methodA log( arguments.callee.caller ); // 指到call methodA的object log( 'new lengt: '+arguments.callee.length ); log( 'rellay lengt: '+arguments.length ); log( this ); return this ; } this.get_s =function (){ log('========================'); log( arguments ); // 實際傳入的參數陣列 log( arguments.callee ); // 指到methodA log( arguments.callee.caller ); // 指到call methodA的object log( 'new lengt: '+arguments.callee.length ); log( 'rellay lengt: '+arguments.length ); log( this ); log(this.s); log(this.len); } } function log(msg) { if( window.console ) { console.log(msg); } } var a = new t(1,2,3,4) a.a(1,2,3); a.a.apply(window,['x','y']); log('len:'+a.len); 

log 結果:
========================
[1, 2, 3, 4]
function()
null
new Length: 0
rellay length: 4
1
========================
[1, 2, 3]
function()
null
new lengt: 0
rellay lengt: 3
Object { s=2, len=3, a=function(), 更多...}
========================
["x", "y"]
function()
null
new lengt: 0
rellay lengt: 2
Window t.html
len:3

來源參考:

2013年5月10日 星期五

利用DocumentFragment加快DOM渲染速度

利用DocumentFragment加快DOM渲染速度

  function CreateNodes(){ for(var i = 0;i < 10000;i++){ var tmpNode = document.createElement("div"); tmpNode.innerHTML = "test" + i + "<br />"; document.body.appendChild(tmpNode); } } function CreateFragments(){ var fragment = document.createDocumentFragment(); for(var i = 0;i < 10000;i++){ var tmpNode = document.createElement("div"); tmpNode.innerHTML = "test" + i + "<br />"; fragment.appendChild(tmpNode); } document.body.appendChild(fragment); }


參考資料:

JavaScript DocumentFragment
out of dom vs documentfragment
利用DocumentFragment加快DOM渲染速度
使用DocumentFragment來加快DOM操作速度
http://blog.rx836.tw/blog/javascript-documentframent/

2013年4月6日 星期六

[Javascription] try ... catch 或 window.onerror

透過下列方式可以捕捉Error message . try{ code... }catch(e){ console.log(e.message); } 後來看到另一個方式, 感覺也不錯, 可以捕捉到所有Error message . window.onerror = function(e){ console.log("caught error: "+e); return true;}

2011年11月14日 星期一

[引用]javascript CDATA的意義

來源:http://www.cnblogs.com/scugzbc/archive/2008/07/13/1242063.html

CDATA 內部的所有東西都會被解析器忽略。
假如文本中包含了大量的 "<" 和 "&" 字符 - 就像編程代碼中經常出現的情況一樣 - 那麼這個 XML 元素就可以被定義為一個 CDATA 部分。
CDATA 區段開始於 "":
<script type="text/javascript">
<![CDATA[
function compare(a,b)
{
if (a < b)
   {alert("a小於b");}
else if (a>b)
   {alert("a大於b");}
else
   {alert("a等於b");}
}
]]>
</script>




在上面的例子中,在 CDATA 區段中的所有東西都會被解析器忽略。

關於 CDATA 區段的註釋:
CDATA 區段不能包含字符串 "]]>",所以,CDATA 區段的嵌套是不被允許的。
同時也需要確保在 "]]>" 字符串中沒有空格或折行。
為什麼要使用CDATA:
       XHTML的第二個改變是使用CDATA段。XML中的CDATA段用於聲明不應被解析為標籤的文本(XHTML也是如此),這樣就可以使用特殊字符,如 小於(<)、大於(>)、和號(&)和雙引號("),而不必使用它們的字符實體。考慮下面的代碼:
<script type="text/javascript">
function compare(a,b)
{
if (a < b)
   {alert("a小於b");}
else if (a>b)
   {alert("a大於b");}
else
   {alert("a等於b");}
}
</script>

這個函數相當簡單,它比較數字a和b,然後顯示消息說明它們的關係。但是,在XHTML中,這段代碼是無效的,因為它使用了三個特殊符號,即小於、 大於和雙引號。要修正這個問題,必須分別用這三個字符的XML實體<、>和"替換它們:
<script type="text/javascript">
function compare(a,b)
{
if (a &lt;b)
   {alert(&quot;a小於b&quot;);}  
else if (a&gt;b)
   {alert(&quot;a大於b&quot;);}
else
   {alert(&quot;a等於b&quot;);}
}
</script>

這段代碼存在兩個問題。首先,開發者不習慣用XML實體編寫代碼。這使代碼很難讀懂。其次,在JavaScript中,這種代碼實際上將視為有語法 錯,因為解釋程序不知道XML實體的意思。用CDATA段即可以以常規形式(即易讀的語法)編寫JavaScript代碼。正式加入CDATA段的方法如 下:
<script type="text/javascript">
<![CDATA[
function compare(a,b)
{
if (a < b)
   {alert("a小於b");}
else if (a>b)
   {alert("a大於b");}
else
   {alert("a等於b");}
}
]]>
</script>

雖然這是正式方式,但還要記住,大多數瀏覽器都不完全支持XHTML,這就帶來主要問題,即這在JavaScript中是個語法錯誤,因為大多數瀏覽器還不認識CDATA段。
<script type="text/javascript">
//<![CDATA[                                            
function compare(a,b)
{
if (a < b)
   {alert("a小於b");}
else if (a>b)
   {alert("a大於b");}
else
   {alert("a等於b");}
}
//]]>                                      
</script>

當前使用的解決方案模仿了「對舊瀏覽器隱藏」代碼的方法。使用單行的JavaScript註釋"//",可在不影響代碼語法的情況下嵌入CDATA段:
現在,這段代碼在不支持XHTML的瀏覽器中也可運行。
但是,為避免CDATA的問題,最好還是用外部文件引入JavaScript代碼。

2011年9月28日 星期三

關於Javascript 考題

1. 解釋jsonp 為何?

ANS : 什麼是JSONP:JSONP(JSON with Padding)是一個非官方的協議,它允許在服務器端集成Script tags 返回至客戶端,通過javascript callback的形式實現[跨網域訪問](這僅僅是JSONP簡單的實現形式)。 由於 JSON 只是一種含有簡單括號結構的純文本,因此許多通道都可以交換 JSON 消息。 因為同源策略的限制(上述提到的安全性問題),我們不能在與外部服務器進行通信的時候使用 XMLHttpRequest。而JSONP是一種可以繞過同源策略的方法,即通過使用 JSON 與 <script> 標記相結合的方法,從服務端直接返回可執行的JavaScript函數調用或者 JavaScript對象。
-----------------------------------------------------------------------------------------------
2. 請解釋下列程式第02~14 , 18, 22 作用為何?

var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } var phone = document.getElementById("phone").value; var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone); request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); function updatePage() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText.split("|"); document.getElementById("order").value = response[0]; document.getElementById("address").innerHTML = response[1].replace(/\n/g, ""); } else alert("status is " + request.status); } }

ANS : 02~14 依據不同的瀏覽器,取得 XMLHttpRequest 物件. 18 設定非同步傳輸完成函式後觸發function updatePage. 22 request.readyState=4 代表伺服器已經完成該請求.

-----------------------------------------------------------------------------------------------

3. 請寫出下列 javascript 執行結果?

function foo(){ foo.abc = function(){alert('def')} this.abc = function(){alert('xyz')} abc = function(){alert('@@@@@')}; var abc = function(){alert('$$$$$$')} } foo.prototype.abc = function(){alert('456');} foo.abc = function(){alert('123');} var f = new foo(); f.abc(); foo.abc(); abc();

ANS :
alert ('xyz');
alert ('def');


-----------------------------------------------------------------------------------------------

4. 請完成下列程式.
程式動作: 當滑鼠點擊[按鈕2]時, 將div1的背景顏色置換成#ff0000,並且將div 顯示出來.
HTML Code : <div id="div1" style="background-color:#ffffff;display:none;" >Hello world !</div> <input type="button" id="bt1" value="按鈕1" /> <input type="button" id="bt2" value="按鈕2" /> <input type="button" id="bt3" value="按鈕3" /> Javascript Code: <script> $(function(){ $('input').live('click',function(e){ ***請完成這部份程式*** }); }); </script>

ANS :

var $this = $(e.target); if ($this.is('#bt2')) { $('#div1').css('background','#ff0000').show(); } -----------------------------------------------------------------------------------------------

5. 請用jquery寫法寫出讓第1,3,5 的checkbox狀態改變成 checked 的code.

HTML Code : <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> <input type="checkbox" name="chk[]" value="3"> <input type="checkbox" name="chk[]" value="4"> <input type="checkbox" name="chk[]" value="5"> Javascript Code: <script> $(function(){ ***請完成這部份程式*** }); </script> ANS :

$('input:eq(0),input:eq(2),input:eq(4)').attr('checked',true);

2011年6月2日 星期四

跑Javascript迴圈執行AJAX呼叫-日期運算

來源 : 暗黑執行緒
記起來, javascript Date 的操作.


<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//準備從1/1做到5/31
var d = new Date(2011, 0, 1);
var june = new Date(2011, 5, 1);
//將待處理的日期放進Array中
var jobQueue = [];
while (d < june) {
var yy = d.getFullYear();
var mm = d.getMonth() + 1;
if (mm < 10) mm = "0" + mm;
var dd = d.getDate();
if (dd < 10) dd = "0" + dd;
//產生yyyy/MM/dd格式日期
jobQueue.push(yy + "/" + mm + "/" + dd);
d.setDate(d.getDate() + 1);
}

var $body = $("body");
function run() {
//檢查是否還有待處理工具
if (jobQueue.length > 0) {
s = jobQueue.shift();
$.post("DoSomething.aspx?date=" + s, {}, function (r) {
//顯示執行結果
$body.append("<div>" + s + ":" + r + "</div>");
//使用setTimeout可調節連續執行的速度
setTimeout(function () {
run();
}, 10);
});
}
}
run();
});
</script>
</head>
<body></body></html>

2011年5月11日 星期三

[javascript] UNIX Time 轉換 格式

用js 取得 UNIX Time :

var foo = new Date();
Unixtime = parseInt(foo.getTime() / 1000);

unix_to_time(Unixtime , 0 ); // 第一個變數 UnixTime ,第二個變數 時差. (例如: 台灣 +8 );

結果: 2011-05-11 16:42:45

function unix_to_time(unixtime , hour ){
unixtime = parseInt(unixtime,10) + (hour*3600);
return new Date(unixtime*1000).formatDate('yyyy-MM-dd hh:mm:ss');
}

Date.prototype.formatDate = function(format) {
var date = this;
if (!format)
format = "MM/dd/yyyy";
var month = date.getMonth() + 1;
var year = date.getFullYear();
format = format.replace("MM", month.toString().padL(2, "0"));

if (format.indexOf("yyyy") > -1)
format = format.replace("yyyy", year.toString());
else if (format.indexOf("yy") > -1)
format = format.replace("yy", year.toString().substr(2, 2));

format = format.replace("dd", date.getDate().toString().padL(2, "0"));
var hours = date.getHours();

if (format.indexOf("t") > -1) {
if (hours > 11)
format = format.replace("t", "下午")
else
format = format.replace("t", "上午")
}

if (format.indexOf("HH") > -1)
format = format.replace("HH", hours.toString().padL(2, "0"));

if (format.indexOf("hh") > -1) {
if (hours > 12) hours - 12;
if (hours == 0) hours = 12;
format = format.replace("hh", hours.toString().padL(2, "0"));
}

if (format.indexOf("mm") > -1)
format = format.replace("mm", date.getMinutes().toString().padL(2, "0"));

if (format.indexOf("ss") > -1)
format = format.replace("ss", date.getSeconds().toString().padL(2, "0"));

return format;
}
String.prototype.padL = function(width, pad) {
if (!width || width < 1)
return this;

if (!pad) pad = " ";

var length = width - this.length

if (length < 1)
return this.substr(0, width);

return (String.repeat(pad, length) + this).substr(0, width);
}
String.prototype.padR = function(width, pad) {
if (!width || width < 1)
return this;

if (!pad) pad = " ";

var length = width - this.length

if (length < 1) this.substr(0, width);
return (this + String.repeat(pad, length)).substr(0, width);
}
String.repeat = function(chr, count) {
var str = "";
for (var x = 0; x < count; x++) {
str += chr
};
return str;
}

2011年1月11日 星期二

捕捉xxs 攻擊.

設置陷阱實時捕捉跨站測試者,搞跨站的人總習慣用alert來確認是否存在跨站,如果你要監控是否有人在測試你的網站xss的話,可以在你要監控的頁面裡hook alert函數,記錄alert調用情況

<script type="text/javascript">
<!--
function log(s) {
var img = new Image();
img.style.width = img.style.height = 0;
img.src = "http://yousite.com/log.php?caller=" + encodeURIComponent(s);
}

var _alert = alert;
window.alert = function(s) {
log(alert.caller);
_alert(s);
}
//-->
</script>


來源:淺談javascript函數劫持

2010年11月10日 星期三

[jscript] 禁止選取與拖曳

下列是禁止選取與拖曳.


document.oncontextmenu=new Function(“event.returnValue=false;”);

document.onselectstart=new Function(“event.returnValue=false;”);//禁止選取

function imgdragstart(){return false;}//禁止圖片滑鼠拖曳

for(i in document.images)document.images[i].ondragstart=imgdragstart

2010年11月2日 星期二

How to embed your site on another site

Source

http://drnicwilliams.com/wp-content/uploads/2006/11/xss_magic.js

function iecheck() {
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var iever = (rslt != null && Number(rslt[1]) >= 5.5 && Number(rslt[1]) <= 7 );
}
return iever;
}

MyXssMagic = new function() {
var BASE_URL = 'http://drnicwilliams.com/wp-content/uploads/2006/11/';
var STYLESHEET = BASE_URL + "xss_magic.css"
var CONTENT_URL = BASE_URL + 'people_list.js';
var ROOT = 'my_xss_magic';

function requestStylesheet(stylesheet_url) {
stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.type = "text/css";
stylesheet.href = stylesheet_url;
stylesheet.media = "all";
document.lastChild.firstChild.appendChild(stylesheet);
}

function requestContent( local ) {
var script = document.createElement('script');
// How you'd pass the current URL into the request
// script.src = CONTENT_URL + '&url=' + escape(local || location.href);
script.src = CONTENT_URL;
document.getElementsByTagName('head')[0].appendChild(script);
}

this.init = function() {
this.serverResponse = function(data) {
if (!data) return;
var div = document.getElementById(ROOT);
var txt = "";
for (var i = 0; i < data.length; i++) {
if (txt.length > 0) { txt += ", "; }
txt += data[i];
}
div.innerHTML = "<strong>Names:</strong> " + txt; // assign new HTML into #ROOT
div.style.display = 'block'; // make element visible
div.style.visibility = 'visible'; // make element visible
}

requestStylesheet(STYLESHEET);
document.write("<div id='" + ROOT + "' style='display: none'></div>");
requestContent();
var no_script = document.getElementById('no_script');
if (no_script) { no_script.style.display = 'none'; }
}
}
MyXssMagic.init();



http://drnicwilliams.com/wp-content/uploads/2006/11/xss_magic.css

#my_xss_magic {
background: #ff7;
padding: 7px;
}


http://drnicwilliams.com/wp-content/uploads/2006/11/people_list.js

MyXssMagic.serverResponse(['Dr Nic', 'Banjo', 'Angus']);


other :
http://www.informit.comarticles/article.aspx?p=603037
XSS (Cross Site Scripting) Cheat Sheet
HTML Purifier XSS Attacks Smoketest

[引用]JavaScript Fix CSS, 讓 IE 5/6 的 CSS 顯示/動作 跟 IE 7 一樣

同樣的 CSS 在 IE5/6/7 顯示的效果都有可能會有所不同, 所以就有人寫 JavaScript 來解決 IE7 上可以跑, IE5/6 不能跑(或不能顯示)的問題. (ex: png 透明圖 就是最常遇到的問題).

出處
這是一段 JavaScript, 目前最新版是 0.9 版, 可由此下載: IE7 JavaScript fix download, 就算不使用, 也可以上去看一下 IE5/6/7 有哪些問題, 如何修正等. 整理的很齊全~

官方網站: IE7 { css2: auto; }, 此 Library 目標:

    IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6

要看 Source 就抓 IE7_0_9-source.zip, 要直接使用就抓 IE7_0_9.zip(有做JS壓縮, 並且有 README.txt), 使用方法很簡單, 只要下面步驟即可:

   1. cd 網站路徑
   2. unzip IE7_0_9.zip
   3. 在 <head></head>中加入此行即可

          <!--[if lt IE 7]><script src="/ie7/ie7-standard-p.js" type="text/javascript"></script><![endif]-->