油漆工程承包,居家油漆粉刷、外牆油漆
油漆老師傅專業施工,來電免費估價!
搬家公司內外玄關門、優質採光罩、藝術欄杆
各種材質、造型門窗設計工程,歡迎洽詢

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] 滲透式jQuery.live()

房東:超哥
發表時間:2011-10-21
[檢舉]


手上有個需求,要掌握網頁裡所有連結被點擊的狀況。


對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>



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





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 0 人回應

    姓名:
    佈告內容: