contents()
methodIf 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>
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 harsukh21@gmail.com
How To Fix GroupBy Not Working In Laravel
Recently we are working with laravel app...PHP7 - Login Logout System in PHP with Session
In this tutorial, we are going to learn...How to create custom radio buttons in HTML using CSS and jQuery
Use the CSS :checked Pseudo-class with j...How to upload custome file in ckeditor in php
Hello everyone we are sharing a one very...How to Dynamically Access Object Property Using Variable in JavaScript
Use the Square Bracket ([]) Notation...