在iframe上觸發點擊

我知道同源策略，只是想方設法。在iframe上觸發點擊

無論如何，我有一個幻燈片（slide.js），它有一些嵌入的視頻。當用戶點擊視頻時，我希望幻燈片暫停播放。來自iframe內部的事件不會觸發，所以我試圖解決這個問題。現在我有一個部分解決方案。我發現在window一個blur事件，如果新的焦點內容是iframe然後我暫停播放幻燈片：

document.activeElement is: 
BODY

現在部分：

$(window).blur(function(event){ 
    console.log(event.target); 
    if($('iframe').is(':focus')){ 
     //clicked inside iframe 
     console.log('test'); 
    } 
    console.log('document.activeElement is:'); 
    console.log(document.activeElement); 
    console.log('\n'); 
});

我在控制檯中看到此頁面加載後令我困惑。單擊事件僅在iframe第一個以外的某個位置點擊時觸發iframe焦點事件。也就是說，在加載頁面後，如果我直接點擊iframe，控制檯就不會記錄測試。如果我在框架外部或瀏覽器中的其他選項卡或其他任何地方單擊，則會觸發事件blur。之後，如果我點擊的iframe，然後我在控制檯中看到測試：

加載頁面後，我點擊不同的標籤，然後再回到原來的標籤：

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…} document.activeElement is: <body class="full">...</body>

然後我點擊的iframe：

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…} test document.activeElement is: <iframe>...</iframe>

爲什麼？

我甚至之前的一切把這個，它並沒有幫助：

$(window).focus();

但是，它的工作原理，如果我這樣做：

$('input').focus();

如果輸入集中，那麼我就可以點擊iframe並觸發事件，而不必事先點擊其他任何東西。

幫助我，你是我唯一的希望......

來源

2013-05-14 smilebomb

編輯：

其實，只要使用本地window.focus()似乎工作對我來說：

FIDDLE

如何只追加一個新元素，將焦點設置到：

$('<input>', {type: 'text', 
       style: 'top: -10000px; position: absolute', 
       autofocus:true} 
    ).appendTo('body') 
    .focus(); // just to make sure

FIDDLE

如果可以的話，我會帶自動對焦的輸入元素直接添加到標記，這樣的模糊事件總是在第一次點擊時觸發。

FIDDLE

來源

2013-05-14 18:16:53 adeneo

謝謝您的回答。實際上頁面上已經有了一個輸入，而且我之前已經嘗試了這個輸入，並且在我首先關注它的時候它就起作用了。它可能與自動對焦的其他形式可能會與此衝突，所以這是最後的解決辦法。 – smilebomb 2013-05-14 18:20:09

@jefffabiny - 編輯我的答案，這是否適合你？ – adeneo 2013-05-14 18:24:04

是的。我可以發誓我已經嘗試過那個......有趣的是，$（window）.focus（）不起作用。我會暫時接受你的回答。首先，我希望有人嘗試解釋爲什麼會發生這種情況。 – smilebomb 2013-05-14 18:27:48

可能是一個解決辦法：

$(window).load(function() { 
    $('body').prop('tabindex', -1).focus(); 
});

來源

2013-05-14 18:09:28

根據您所使用的視頻服務，這將是最好使用他們的視頻API。那麼你可以獲得視頻事件，並確切地知道何時暫停和/或恢復您的幻燈片。

YouTube API（使用Froogaloop不錯demo）（demo）

<script src="http://www.youtube.com/iframe_api"></script>

Vimeo API

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

來源

2013-05-14 18:18:40 Mottie

這是一個潛在的解決方案。實際上，我們都使用這些服務，並且可能更多。所以，如果我找不到更好的東西，這將工作。無論如何，我很好奇瀏覽器爲什麼這樣做。 – smilebomb 2013-05-14 18:22:53

當我編寫視頻擴展時，我必須爲[AnythingSlider]（http://css-tricks.github.io/AnythingSlider/video.html）執行此操作。 – Mottie 2013-05-14 18:25:02

在iframe上觸發點擊

回答

相關問題