Detect clicks of iframe elements - javascript

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
});
});

Related

How would you get a src from an iframe within an iframe?

I have some code that in short, is opening an iframe (let's call it iframe1) to view a pdf file, and that pdf is being shown in an iframe itself (let's call it iframe2), I would like to be able to get the source of the iframe2 that is within an iframe1 that would be opened so that the iframe1 itself is just the src of the pdf iframe2 and not 2 different iframes. The Url's are very different.
what is the best way to do this?
I have an open_iframe function that looks something like
function open_iframe(url) {
return '<iframe id="iframe" src="' + url + '" width=100% height=100% frameborder="0" allowfullscreen></iframe>';
}
and I am writing another function that is
function find_file_url(url) {
let iframe = this.open_iframe(url);
return iframe.contentWindow.document.getElementsByTagName('iframe')[0].src;
}
I also have Jquery available to use as well.
Is this something that's possible?
Is there a better approach?
Thanks in advance!
have you attached the iframe object to your dom?
In this the html tag for "iframe" instead of creating a html string , you can create the dom iframe object directly and assign attributes to them and then parse it further.
As Barmar said until then it would considered as just a html string.
.document.getElementsByTagName('iframe') will be a null element as it is not attached to document object.
You might try document.domain = "site.com" , I'm dealing with similar issue.
This will ensure they are in the same domain
Also you can use iframe.contentWindow and iframe.contentDocument scripting to communicate inside for the nested frame.
also assign onload, errorOnload to the attributes for console tracking
iFrame onload JavaScript event
https://javascript.info/cross-window-communication

How to handle eventListener for iframe in html?

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.

How to detect a link click with JavaScript/jQuery in a iFrame?

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

jquery selector from iframe content to object content

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.

Iframe onpagechange event?

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

Categories