iframe上的點擊事件？

我有一個簡單的iFrame ...iframe上的點擊事件？

<iframe src="url" width="980px" height="90px" id="inviteFrame" name="inviteFrame" scrolling="no"></iframe>

我知道我不能趕上點擊框內的元素，但如何對事件簡單的點擊或的mousedown對自身的iFrame？

$('#inviteFrame').click(function() { 
    console.log('test'); 
    $(this).attr('height', '140px'); 
});

這不適合我！

來源

2012-05-13 matt

你是否在'iframe'中顯示**你的服務器**的頁面？ – VisioN

其實是的，從我的網頁的子域。所以我在「url.com」和iframe src是「subdomain.url.com」...現在我在本地，只是想知道如何在點擊它時捕捉點擊事件。 – matt

jQuery有一個方法，名爲.contents()，當在iframe元素上使用時返回iframe的文檔。

// Get a reference to the iframe document 
var iframeDoc = $('#inviteFrame').contents().get(0);

現在你可以將事件綁定到它，得到的尺寸，款式獲得各種元素等：

// Get width of iframe document 
$(iframeDoc).width(); 

// Get height of iframe document 
$(iframeDoc).height(); 

// Bind event to iframe document 
$(iframeDoc).bind('click', function(event) { 
    // do something 
}); 

// Get the style of an element in the iframe 
$('div', iframeDoc).css('backgroundColor');

來源

2012-05-13 13:50:57 Zuul

這當然只適用於iframe內容來自同一個域，對嗎？ – matt

它是否也適用於來自第三方的iframe？這似乎不是根據我的測試。 – clwen

@clwen如果Iframe來自不同的域，由於jQuery的跨域請求處理，它將不起作用。你可以嘗試使用：'jQuery.support.cors = true;'強制跨站腳本（從jQuery 1.5開始）。您可以查看文檔[此處]（http://api.jquery.com/jQuery.support/）。 – Zuul

你不能這樣做，因爲Web瀏覽器的same origin policy這一點。

但是，您可以使用blur事件和mouseover/mouseout事件的解決方法。這是如何工作的我iframeTracker jQuery插件，旨在跟蹤在I幀點擊：https://github.com/finalclap/iframeTracker-jquery

下面是一個例子：

jQuery(document).ready(function($){ 
    $('.iframe_wrap iframe').iframeTracker({ 
     blurCallback: function(){ 
      // Do something when iframe is clicked (like firing an XHR request) 
     } 
    }); 
});

享受！

來源

2013-04-03 17:49:14 Vince

嗨@Vince，我使用你的插件來做這樣的事情，但有一些問題。你能在這裏提供我的其他問題的任何幫助嗎？ http://stackoverflow.com/questions/25891050/accuratly-catch-clicks-on-an-iframe – tripRev

iframe上的點擊事件？

回答

相關問題