[JQuery] 滲透式jQuery.live()

對jQuery來說這是小菜一碟，利用$("a").live("click", function() { ... });就可在使用者點擊連結時加入自訂邏輯。不過，有挑戰性的部分在於網頁中可能穿插IFrame內嵌其他網頁，原本這個手腳只想動在MasterPage，就打算一口氣將網站所有網頁一網打盡，但$("a")的範圍只限於jQuery所在的window物件範圍，如果連內嵌網頁都要涵蓋，感覺上得在內嵌網頁裡也加上jQuery，也跑一次$("a").live("click", ...)。

"要手動修改一大堆網頁"這件事徹底挑動了【懶人】最敏感的神經，逼我又動起歪腦筋--是否可以找出主網頁裡所有的內嵌網頁，再滲透進去一一加掛$("a").live("click", ...)? 理論上只要不違背Same Origin Policy，主網頁可以透過contentWindow屬性存取到內嵌網頁的DOM，技術上是可行的。

於是，我試出了以下的Prototype，在此野人現曝一番，歡迎大家回饋與指教。

排版顯示純文字

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

//用load而不是ready，會等所有IFrame都載入後才觸發

$(window).load(function () {

//將設定邏輯寫成function，稍後可再度利用

var hookProc = function () {

$("a").live("click", function () {

alert("clicked!");

});

};

hookProc();

//針對所有IFrame進行操作

$("iframe").each(function () {

//透過IFrame.contentWindow存取其中的網頁

//cross-domain時會失敗，故加上try

var win, doc;

try {

win = this.contentWindow;

doc = win.document;

} catch(err) {}

//無法取得IFrame的window或document就放棄

if (!win || !doc) return;

//檢查IFrame中是否已載入jQuery?

if (!win.jQuery) {

//動態載入

var jqInject = doc.createElement("script");

jqInject.src = "../js/jquery-1.3.2.js";

jqInject.type = "text/javascript";

doc.getElementsByTagName("head")[0].appendChild(jqInject);

//等待jQuery載入

function waitjQueryLoaded() {

if (typeof win.jQuery == "undefined") setTimeout(waitjQueryLoaded, 100);

else {

//將前述的邏輯對IFrame的window也做一次

win.eval("(" + hookProc.toString() + ")();");

waitjQueryLoaded();

});

});

</script>

</head>

<body>

<a href="#">Link in Parent</a>

<br />

<iframe src="Child.htm" id="frm1"></iframe><br />

<iframe src="http://www.google.com.tw"></iframe><br />

<iframe src="Child.htm" id="Iframe1"></iframe><br />

</body>

</html>

<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
//用load而不是ready，會等所有IFrame都載入後才觸發<br />
$(window).load(function () {<br />
//將設定邏輯寫成function，稍後可再度利用<br />
var hookProc = function () {<br />
$("a").live("click", function () {<br />
alert("clicked!");<br />
});<br />
};<br />
hookProc();<br />
//針對所有IFrame進行操作<br />
$("iframe").each(function () {<br />
//透過IFrame.contentWindow存取其中的網頁<br />
//cross-domain時會失敗，故加上try<br />
var win, doc;<br />
try {<br />
win = this.contentWindow;<br />
doc = win.document;<br />
} catch(err) {}<br />
//無法取得IFrame的window或document就放棄<br />
if (!win || !doc) return;<br />
//檢查IFrame中是否已載入jQuery?<br />
if (!win.jQuery) {<br />
//動態載入<br />
var jqInject = doc.createElement("script");<br />
jqInject.src = "../js/jquery-1.3.2.js";<br />
jqInject.type = "text/javascript";<br />
doc.getElementsByTagName("head")[0].appendChild(jqInject);<br />
}<br />
//等待jQuery載入<br />
 <br />
function waitjQueryLoaded() {<br />
if (typeof win.jQuery == "undefined") setTimeout(waitjQueryLoaded, 100);<br />
else {<br />
//將前述的邏輯對IFrame的window也做一次<br />
win.eval("(" + hookProc.toString() + ")();");<br />
}<br />
}<br />
waitjQueryLoaded();<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<a href="#">Link in Parent</a><br />
<br /><br />
<iframe src="Child.htm" id="frm1"></iframe><br /><br />
<iframe src="http://www.google.com.tw"></iframe><br /><br />
<iframe src="Child.htm" id="Iframe1"></iframe><br /><br />
</body><br />
</html>

PS: 以上的做法我想到兩個缺點(但對我的應用來說不是大問題) 1) $(window).load()可以確保所有IFrame都載入後才開始動作，相對地掛好事件前的空窗期會變長 2) 只支援單層結構，無法涵蓋IFrame裡又有IFrame的狀況。

姓名：
佈告內容：
其他選項: