2016-02-17 100 views
1

問題爲什麼這個onClick事件不能在HTML iframe中工作?

我想在用戶點擊iframe時使用onClick事件進行註冊。爲什麼這不起作用?

這裏是一個fiddle

代碼

<html> 
<head> 
<script> 

function myFunction() { 
    document.getElementById("demo").innerHTML = "Hello World"; 
} 
</script> 
</head> 

<body onLoad="def()"> 
<iframe id="myFrame" border="0" onclick="myFunction()"></iframe> 
<p id="demo"></p> 

</body> 
</html> 
+1

點擊事件只會觸發iframe的邊框不是裏面 – RRR

+0

你將不得不監聽器綁定到頁面的iframe內。 (我相信有這一個易受騙的人) – epascarello

+0

我不能到裏面頁面上添加一個監聽器,因爲它鏈接到另一個網站。無論如何,我可以檢測到有人點擊iframe而沒有用範圍之類的東西來掩蓋iframe? –

回答

1

如果iframe是從您自己的網站,你可以這樣寫:

document.getElementById("myFrame") 
    .contentWindow.document.body 
    .onclick = function() { 
     alert("iframe clicked"); 
    } 

代碼但不若工作iframe來自不同於主機頁面的域。

+0

不幸的是我沒有任何主機或自己加載的頁面是不可能的iframe中捕獲它的頁面必須從iframe標籤的相同頁面完成。 –

+0

我需要這樣的事,但對於具有不同ID的多個iframe http://jsfiddle.net/oqjgzsm0/ –

0

我不知道這是否與工作不CORS或任何網站,但我需要這個曾與多個iframe具有不同ID的 - 當你點擊 https://jsfiddle.net/ab0a/1fyoajqc/6/

<!-- Multiple iframes with different IDs --> 
<iframe id="iframe" src="https://livestream.com/accounts/5690925/events/6124324/player?width=960&height=540&enableInfoAndActivity=true&defaultDrawer=feed&autoPlay=true&mute=false" width="960" height="540" frameborder="0" scrolling="no" allowfullscreen></iframe> 
<iframe id="iframetwo" src="iframe/here/too" width="960" height="540" frameborder="0" scrolling="no" allowfullscreen></iframe> 
<iframe id="iframethree" src="iframe/here/as/well" width="960" height="540" frameborder="0" scrolling="no" allowfullscreen></iframe> 
<div id="message"></div> 

<script> 
var monitor = setInterval(function() { 
    var elem = document.activeElement; 
    if (elem.id == 'iframe') { 
    message.innerHTML = 'One'; 
    //use clearInterval(monitor); if you want to stop checking 
    //clearInterval(monitor); 
    } 
    if (elem.id == 'iframetwo') { 
    message.innerHTML = 'Two'; 
    //clearInterval(monitor); 
    } 
}, 100); 

/* If you only want to check for a specific iframe once, but still want to check for others, set up another monitor for that specific iframe */ 
var monitorTwo = setInterval(function() { 
    var elemTwo = document.activeElement; 
    if (elemTwo.id == 'iframethree') { 
    message.innerHTML = 'Three'; 
    message.style = 'background-color: red;'; 
    clearInterval(monitorTwo); 
    } 
}) 
</script> 
相關問題