I want to add a click event to an iframe. I used this example and got this:
$(document).ready(function () {
$('#left').bind('click', function(event) { alert('test'); });
});
<iframe src="left.html" id="left">
</iframe>
But unfortunately nothing happens.
When I test it with another element (e.g. a button), it works:
<input type="button" id="left" value="test">
You could attach the click to the iframe content:
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
Note: this will only work if both pages are in the same domain.
Live demo: http://jsfiddle.net/4HQc4/
Two solutions:
Using :after on a .iframeWrapper element
Using pointer-events:none; one the iframe
1. Using :after
use a transparent overlay ::after pseudo element with higher z-index on the iframe's wrapper DIV element. Such will help the wrapper to register the click:
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper::after{ /* I have higher Z-index so I can catch the click! Yey */
content:"";
position:absolute;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
}
.iframeWrapper iframe{
vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
2. Using pointer-events:none;
Clicks are not handleable from outside the iframe from an external resource (if the iframe is not in your domain).
You can only create that function inside your 'called into iframe' page, not from within the iframe-hosting page.
How to do it:
You can wrap your iframe into a div
make the click "go through" your iframe using CSS pointer-events:none;
target clicks with jQuery on your wrapping DIV (the iframe parent element)
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper iframe{
vertical-align:top;
pointer-events: none; /* let any clicks go trough me */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
NOTA BENE:
No clicks will be registered by the iframe element, so a use-case would be i.e: if by clicking the iframe you want to enlarge it full screen.... Etc...
I got it to work but only after uploading it to a host. I imagine localhost would work fine too.
outer
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
var myFrame = document.getElementById("myFrame");
$(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
});
</script>
<body>
<iframe id="myFrame" src="inner.htm"></iframe>
</body>
</html>
inner
<html>
<head>
<style>
div {
padding:2px;
border:1px solid black;
display:inline-block;
}
</style>
</head>
<body>
<div>Click Me</div>
</body>
</html>
Pure Javascript
Not my solution but only this works well.
let myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
$(document).ready(function () {
$('#left').click(function(event) { alert('test'); });
});
<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>
The script would have to be ran entirely from the iframe. I would recommend a different method of calling content, such as php.
iframes aren't really worth the hassle.
The actual problem is that, the click event does not bind to the DOM of the iframe and bind() is deprecated, use .on() to bind the event. Try with the following codes and you will find the borders of the iframe clickable getting that alert.
$('#left').on('click', function(event) { alert('test'); });
Demo of that Issue
So how to get it done?
How you should do is, create a function on iframe page, and call that function from that iframe page.
Related
This topic has been covered a few times but there is no clear solution using Javascript. All responses were quite nebulous. Please help me out as there hasn't been a straightforward answer anywhere that I could find on any site.
I am trying to execute a function when any click occurs within an iframe window. Specifically, a click on a hyperlink on page displayed within the iframe. However just being able to have any click within an iframe trigger a function is enough for me.
I have a function Show() that I would like to run when an iframe is clicked. So basically a link is automatically hidden and when the first link is clicked it is shown. When the "click to hide" link that shows up is clicked, the "click to hide" link is hidden. I want the "click to hide" link to show up when someone clicks within the iframe. I need it to run the function every time a click occurs within the iframe. Thanks.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<iframe src="http://www.google.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
click to show below link
<div id="my_div" class="hidden">
<a href="http://www.google.com" target="hello" onclick = "Hide();" >click me to hide</a>
</div>
</center>
</body>
</html>
If there is some kind of domain issue please explain and please, if you have time and are able, explain what the issue is and how to fix such a problem. Edits to this code are welcome for the sake of coming up with a solution that achieves the goal that I outlined.
You guys are great.
UPDATE
I have implemented apaul34208's response which technically works, but I am having three problems.
1) How can this take up the full width of the window (I tried adding 100% to the width value under #cover)
2) When the div covers all of the iframe, the webpage within the iframe is not clickable
3) The div is not transparent.
If someone can edit the below code and have the div take up all of the width while being transparent with the iframe's webpage being entirely clickable - I would be very appreciative and happy.
<html>
<head>
<title>Show / Hide Link</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 150px;
}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://stackoverflow.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
links
<div id="my_div" class="hidden">
<a href="http://stackoverflow.com" target="hello" onclick = "Hide();" ><-</a>
</div>
</center>
</body>
</html>
I would strongly advise against doing this for any reason, this is usually referred to as "Clickjacking", and it is an extremely bad practice.
So... Please don't ever do this.
But for educational purposes... You can cover an iframe with another positioned element and capture the click on that element:
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
.visible {
visibility: visible
}
.hidden {
visibility: hidden
}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 300px;
}
<div id="cover" onclick="Show();"></div>
<iframe id="iframe" src="http://stackoverflow.com"></iframe>
<div id="my_div" class="hidden">
click me to hide
</div>
Once again. Don't ever do this.
I found a solution. It's not perfect but I figured out that I don't really need to it to detect every iframe click and this is good enough. I originally wanted to make a back button appear if a link within the page that is within the iframe was clicked (which would return the user to the main page within the iframe where they started). Obviously they may click randomly and not hit a hyperlink and the back link would pop up for no reason (while they are still on the main page). That's fine I guess but if someone knows of a better solution let me know. Most people would just hit a link to begin with as the page only has hyperlink interaction I presume.
I hope my working code below helps people who are exploring this topic in the future.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
}
</style>
<script type="text/javascript">
var visible_link = true;
var inIframe = false;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
function checkClick() {
if (document.activeElement
&& document.activeElement === document.getElementById("hello")) {
if (inIframe == false) {
Show();
inIframe = true;
}
} else
inIframe = false;
}
setInterval(checkClick, 200);
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://w3schools.com" height=549 width=100% frameborder=0 name = "hello" id = "hello" style =""></iframe>
click to show link
<div id="my_div" class="hidden">
<a href="http://w3schools.com" target="hello" onclick = "Hide();" >click to hide</a>
</div>
</center>
</body>
</html>
Is there a way I can fire an event if the contents of the body of an IFrame changes.
<iframe name="upload-iframe-1" id="upload-iframe-1" frameBorder="0" style="width: 0px; height: 0px; display: none;">
<head>
</head>
<body>
</body>
</iframe>
Tried this but does not fire
$("#upload-iframe-1").contents().find('body').on("change",function (e) {
alert("changed");
});
Thanks
Have you tried using $(window).unload() This might help you to detect page unload from within iFrame.
$( window ).unload(function() {
return "Handler for .unload() called.";
});
I'm working on a simple HTML/jQuery script.
Right now when i click on the button which is inside the iframe it is changing the iframe's height that is calling the content with the button.
Take a look at the code:
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the iframe.php content:
<HTML>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<div style="display:block;height:300px;">
<h3>The iframe content</h3>
<button type="button" id="SuperWebF1">Click me to resize the holding Iframe!</button>
</div>
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
})
</script>
The problem is coming when i try to add this:
<style>
#outerdiv
{
width:400px;
height:300px;
overflow:hidden;
position:relative;
border:2px solid #fff;
}
#inneriframe
{
position:absolute;
width:400px;
height:700px;
border:0px;
}
</style>
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
As you can see i've added a <style> tag where i added CSS for the elements outerdiv and the iframe inerriframe and now when i click on the button it's not chaning the iframe's height.
When i remove the <style>....</style> tags and all the content inside them the script is starting to work again.
Here is the demo: http://beta.sportsdirect.bg/test/
This is the working demo when i have not added the <style></style> tags.
Can you help me set up the CSS for these elements and make the jQuery script works as well ?
Thanks in advance!
The event will not trigger it's function when the document is not fully loaded inside the iframe page.
Instead of:
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
</script>
Use:
<script type="text/javascript">
$(document).ready(function(){
$("#SuperWebF1").on('click',function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
});
</script>
For it to listen to the click event when all the .css,.js and whole documents in the page are completely ready.
I hope this will help?
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
#s
{
width:200px;
}
#div1
{
min-width:100px;
width:auto;
float:left;
border:2px solid black;
min-height:100px;
height:auto;
background-color:red;
}
</style>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
});
$("#s").click(function(){
alert("sljsdf");
});
});
</script>
</head>
<body>
<div id="div1">
VOLVO B9R
</div>
</body>
</html>
Here when i click on the first div, the program creates another div. the newly created div is not responding to on click event. in the current code i have specified that the newly created div should give an alert on click but its not working.
Thanks!
You need event degation for dynamically added elements. The time the binding code for element with id s is executed the element does not exists in DOM
$(document).on("click", "#s", function(){
alert("sljsdf");
});
Delegated events
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers, jQuery doc.
When your dom ready handler is executed the #s div does not exists in the dom, so the click handler will not get added to the element. You can use event delegation to fix this problem
$(document).on('click', "#s", function () {
alert("sljsdf");
});
Demo: Fiddle
try something like this
$("body").on('click','#s',function(){
alert("sljsdf");
});
REFERENCE
http://api.jquery.com/on/
Since the #s element are created dynamically you need to use event delegation to register event handlers to these elements.
When you use $('#s').click(....); to register an event handler it will register the handle to only those elements which are already present in the dom at the time of the code execution, in you case since these elements are created after that the handlers will not get attached to the newly created elements
Try this
$(document).ready(function(){
$(document).on('click',"div",function(){
$(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
});
$(document).on("click", "#s", function(){
alert("sljsdf");
});
});
DEMO
Please see this LINK
OR
Try below code...
Your HTML ....
<div id="div1"> VOLVO B9R </div>
Your JQuery Code....
$(document).ready(function () {
$("div").click(function () {
$(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
$("#s").bind('click', function () {
alert("sljsdf");
});
});
});
Your CSS....
#s
{
width:200px;
float:right;
}
#div1
{
min-width:100px;
width:auto;
float:left;
border:2px solid black;
min-height:100px;
height:auto;
background-color:red;
}
Use below code..
$(document).ready(function () {
$("div").click(function () {
$(this).after($('<div id="s" style="background-color:blue; clear:both">NLC TRANSPORT</div>'));
$("#s").bind("click", function () {
alert("sljsdf");
});
});
});
Good luck.
The following jQuery lines of code will help you..
$(document).ready(function(){
$('body').on('click','#div1',function(){
$(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
$('#s').click(function(){
alert('a');
})
})
});
You can't add an event handler to an element that doesn't exist yet:
$(document).ready(function () {
$("div").click(function () {
$(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
$("#s").click(function () {
alert("sljsdf");
});
});
});
Try This Code :
$(document).ready(function(){
$("#div1").click(function(e){
$(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
$("#s").click(function(){
alert("sljsdf");
});
});
});
I have a div and a simple jQuery code that calls the div on an 'onlclick' event and properly hides on 'onmouseout' event. The problem is when I put a text or a link inside this div and move a cursor over the text / link in this div - it triggers out() function effect and dissappears - even if the cursor is still inside the div. Why is that so ? Thanks for comments.
<script src="js/jquery.js"></script>
<style type="text/css">
#sample {
position:relative;
width:500px;
height:200px;
background-image:url(images/img.png);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<a href="javascript:show();" >link</a>
<div id="sample" onmouseout="out()">THIS IS TEXT</div>
<script type="text/javascript">
$(document).ready(function() {
$("#sample").hide();
});
function show() {
$("#sample").fadeIn('slow');
}
function out() {
$("#sample").fadeOut('slow');
}
</script>
</body>
</html>
Use mouseenter and mouseleave.
In the document ready function add this
jQuery("#sample").mouseleave(out);
and remove the onmouseout code from the HTML markup.
remove JavaScript code from HTML
and try this.
$(function(){
$("#sample").hide();
$("a").click(function() {
$("#sample").fadeIn('slow');
return false;
});
$("#sample").mouseout(function() {
$("#sample").fadeOut('slow');
});
})();
Demo
Your <a> element is inside the #sample element, so running fadeOut on #sample will hide it, and everything inside it.
To keep the <a> you need to place it outside #sample in the html.
Oooh, no I get it, try this instead of the inline stuff:
$("#sample").hide();
$("a").mouseenter(function() {
$("#sample").fadeIn('slow');
});
$("#sample").mouseleave(function() {
$("#sample").fadeOut('slow');
});
Here's a Fiddle, not the way I would do it, but the closest I could get to your example: http://jsfiddle.net/GkSGz/