How can I detect a link click inside a iFrame?
The Frame source changes a lot of times and I need to detect all link click inside the iFrame.
I try that already: Javascript - click link in iframe
JS:
$("#Source a").click();
HTML:
<iframe src="" name="Source" id="Source" scrolling="" frameborder="0" title="Anzeigebereich"></iframe>
you need to use .contents() http://api.jquery.com/contents/
$('#Source').on('load', function(){
$(this).contents().find('body').on('click', 'a', function(e){
e.preventDefault(e);//stop normal navigation
//your code here
});
});
If you trying to catch an event or do whatever inside the iframe from the oustide document, it isn't possible, the iframe is different context (different document) and this is not alowed. You can check a similar question here
use post message, for communicaton between frames, also support different domains
post message doc
Related
I have added the iframe code in the Html code which is the default iframe tag of the Dialogflow WebDemo. When you go through the picture which I have uploaded that indicates that when the user types the message and presses enter then automatically it display other response. What I need is when the user presses the enter then I should write the function in the script.
Here is the code of iframe tag in the HTML -
<iframe allow="microphone;" id="myFrame" width="350" height="430" src="dialogflow_bot_link"></iframe>
Try the following
$(document).ready(function(){
$("iframe").load(function(){
$(this).contents().on("keyup", function(){
// handle 'keyup' event
});
});
});
iframe tag embeds a separate webpage into the parent webpage. So we use load() to load the contents of the iframe and contents() to get the immediate children within the iframe.
I have an iframe with the id=phramecomp which contains several elements such as links and button.Let us suppose i have a hyperlink inside iframe with the id=donuts.I want to set a click event for that hyperlink.How do i achieve that ?
This might be duplication of many questions but still anyone could tell me how to do this one ?
Note:
iframe is on other php file by the name orderonlinelist.php
I have included this iframe inside orderonline.php file and i am writing my click function here.
<iframe src="http://localhost/orderonline_list.php" name="phramecomp" id="phramecomp" frameborder="0" scrolling="yes" ></iframe>
This is what i have included in my orderonline.php file.
you can detect click events inside iframe
Lets suppose you an iframe having id="Myframe" and a image in you iframe having id "Myimage"
so for detecting click events inside Myframe in image Myimage you can
$('#Myframe').loads(function()
{
var frame=$('#Myframe').contents();
frame.find('#Myimage').click(function(){
//do anything
});
});
Firstly both the parent page and the iframe are hosted on the same server (my localhost on WAMP) so same origin policy should not be an issue here.
I can't get the trigger to work. My iframe has the id of iframe.
$(window).load(function(){
//iframe ad hovers
$('#iframe').contents().find('body div').click(function(){
alert('do something here');
});
});
what am i doing wrong?
I'm not sure the browser's going to propagate a "click" event from the window context of the <iframe> out to the containing window. Does the document loaded into the <iframe> have its own copy of jQuery? If so, you can try this:
$('#iframe').contents().$.find('body div').click(function(){
alert('do something here);
});
That change makes the jQuery code in the <iframe> window handle the event.
Well I think that #jAndy is right and that should work as is - but you have to make sure the document in the frame is loaded. Try this:
$('#iframe').load(function() {
$(this).contents().find('body div').click(function() { alert("hi"); });
});
Your code is not wrong; i think the only mistake you are doing is that you are asking for the iframe's content on the parent page load which means at this stage the iframe has not been loaded yet.
Try my quick example http://jsfiddle.net/UFM44/4/
It is same as your code but i trigger it after clicking on "now" link. if you then click on the logo you can see the alert() message.
I need the following:
I got a html document, in which I have an iframe and an object. Both, the iframe and the object contain separat html files.
Now I want to click a link in the iframe, and this should affect the links inside the object to hide.
How do I use jQuery selectors to select the links in the object html file?
Structure:
<html file parent>
<iframe> html site 1 with link to click</iframe>
<object> html site 2 with links to affect </object>
<html file parent>
Thanks in advance!
This is not possible if the domain of the iframe is different from that of your .
This is a javascript restriction.
For this to possible you need to have control on the url loaded in the iframe.
If it is of same domain then you can probably do that.
If you have control over the iframe's url try this.
First, have a look at window.postMessage. Using this, you may send an event from your iframe to the window parent target. Listening for that event in the window parent (when something in your iframe changed), you will then be able to access any element inside the object tag using a syntax like this:
$('object').contents().find('linkSelector')
Give your iframe an id, let's say myIframe:
<iframe id="myIframe"> html site 1 with link to click</iframe>
Get a reference to the iframe:
var myIframe = document.getElementById('myIframe');
Post a message from iframe:
myIframe.contentWindow.postMessage('iframe.clicked', 'http://your-domain.here.com');
Handler for iframe change:
var handleIframeChange = function(e) {
//
if(e.origin == 'http://your-domain.here.com') {
// Get reference to your `object` tag
var objContent = $('object').contents();
// For instance, let's hide an element with a class of `link-class-here`
objContent.find('.link-class-here').hide();
}
}
Listen on parent window for the event sent by the iframe:
window.addEventListener('iframe.clicked', handleIframeChange, false);
Haven't tested it right now (did this in the past, when I had control over iframe) but it should work, but as I said, only if you can have control over the iframe.
As we all know clicking a normal link in an iframe opens up the respective page within the iframe. Now my question is whether there is a way to react to the new page being opened on the page the iframe is within.
Like an iframe.onpagechange event that fires whenever the page within the iframe changes e.g. when a link is clicked.
Is there such event? And if not do you have any suggestions for a possible approach?
In that case then no it's not possible, not reliably across all browsers.
In the more modern browsers they do allow you to use an 'onload' event on the iframe tag itself, and this triggers each time the iframe reloads - i.e. when a link is clicked. However, this isn't supported on older browsers and there are many websites out there that are designed to break out of frames. If the site breaks out of your frame, you get no load event triggered. On top of this, because you are dealing with an iframe outside of your control/domain that is about all you can do -- tell that the frame has loaded -- everything else will be blocked from your access.
<iframe onload="iframeLoaded()" src="..." />
Or the better approach would be:
<iframe id="frame" src="..." />
<script>
window.onload = function(){
document.getElementById('frame').addEventListener('load', iframeLoaded);
}
</script>
As i've said in my comment, give the html target attribute a chance. Use it in context with javascripts open function.
Iframe: HTML
Link
Iframe: JS
$('a').on('click', function() {
var target = this.href;
window.open(target, "_parent");
return false;
});
Page: HTML
<iframe src="http://fiddle.jshell.net/CGuHR/13/show"></iframe>
Fiddle