8
How to detect click inside iframe using JavaScript
source link: https://www.laravelcode.com/post/how-to-detect-click-inside-iframe-using-javascript
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to detect click inside iframe using JavaScript
Ad byValueimpression
Use the jQuery contents() method
If you try to detect or capture a click event inside an iframe simply using jQuery click() method it will not work, because iframe embed a web page within another web page. However, you can still do it on the same domain utilizing the jQuery contents() and load() method.
The following example will display an alert message whenever you click inside the iframe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Detect Click into iFrame</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
body{
padding: 30px;
}
iframe{
width: 100%;
height: 200px;
border: 2px solid #ccc;
}
</style>
<script>
$(document).ready(function(){
$("iframe").load(function(){
$(this).contents().on("mousedown, mouseup, click", function(){
alert("Click detected inside iframe.");
});
});
});
</script>
</head>
<body>
<iframe src="/examples/html/table-layout.php"></iframe>
</body>
</html>
Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Related Articles
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK