Clicked linked withing iframe - javascript

If I have a website loaded inside an iFrame, like this:
$("#myIframe").attr("src",url);
...is it possible to capture a URL of a new page when a user clicks a link withing that site?

You can attach to the onLoad Event
<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>
or
$('#myIframe').load(function() {
alert("the iframe has been loaded, pull the src");
});
Working Sample per Muthu Kumaran:
http://jsfiddle.net/muthkum/DuRTR/

You cannot access the content of an iframe from the page containing it since that would allow you to do alot of evil stuff like steal session cookies, make the user click stuff he didn't want to on another site, etc..
Glennulars answer will apparently work tho. :)

I don't know if events bubble up to the iframe, but you could try:
$("iframe").click(function(e){
console.log('something was clicked');
});

Related

Call number on page load / document ready

I need to create a blank webpage with the url like: https://www.example.com/callme and we will share the link with our customers.
When someone clicks the link, a blank page will load, and as soon as the document is ready or dom content loaded, it has to automatically dial a specific number on mobile devices.
Basically you can do this with a link tag with href "tel:xxxxx", but i need it to be automatically clicked when the page load, not to click/tap it manually.
Here is what i tried so far but with no success:
document.addEventListener('DOMContentLoaded', function() {
$('#call').trigger('click');
}, false);
and
$(document).ready(function(){
$('#call').click();
});
and
$(document).ready(function(){
$('#call').trigger('click');
});
and here is the simple html:
Call me
Any advice is much appreciated, thanks in advance
Simply include this one-liner to change your client's url to your tel-link
window.location.href="tel:123456789";
If they are on a device that has a handler for tel-links (a mobile-phone for example) their phone app will open and give them the opportunity to call you

Closing an iframe after it has reloaded another html page

I have made the following site:
www.ppp.one
Whenever you open an image, a popup is loaded.
This popup can be closed using the X on the top-right. However, if you click on one of the thumbnails in the popup (reloading the frame) the X button can no longer close it.
The JavaScript I use:
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
And the html:
<a class="small align-top" onclick="frameWarp.hide();">&#10006</a>
Any ideas on what is causing the issue?
When you open the popup you call a function setUpAPI which inserts the frameWrap object into the global scope of the iframe.
When a thumbnail is clicked the frame is reloaded and the frameWrap instance is no longer available.
You could try listening for load events on the iframe instead of ready events:
iframe.ready(function(){
frameCacheDiv.append(iframe);
});
iframe.load(function(){
setUpAPI(iframe, settings);
settings.onShow();
});
It looks like when the iframe's URL changes the frameWarp variable becomes undefined. One idea to try would be to listen to the load event of the iframe and make your changes there: (you'd have to give it the ID of "iframeId")
$('#iframeId').load(function(){
console.log('URL changed');
// code to attach hide event here
});
Another idea would be to change your setup to use the postMessage API for the communication between the parent and iframe. You can read a tutorial of how to do that here:
http://robertnyman.com/html5/postMessage/postMessage.html
Edit: Actually, this blog post is a better example: http://davidwalsh.name/window-iframe

How do I change parent page url based on if url of iframe is changed?

I have a survey monkey survey, and after I make my selections and click submit I notice that the page url changes. I know that because of same origin policy my original idea to use jQuery to figure out if a submit occurred in the iframe will not work. JSFiddle code below:
jQuery(document).ready(function(){
var title = 'Thank you for completing our survey!';
if($('#surveyMonkeyInfo').contents().find("div.embed_title").val() == title){
window.location.replace("http://stackoverflow.com");
}
setTimeout(arguments.callee, 1000);
})
Then I thought, what if instead I used jQuery to see whether or not the url in the iframe is changed, although I do not get an error in which the underlying cause is SOP related, it simply does not work, nothing happens at all when the url of the iframe changes.
surveyMonkeyInfo.onbeforeunload = function () {
window.location.replace("http://stackoverflow.com");
}
Many apologies for the code smells if there are too many, but how do I get this to work?
If the iframe is the only one in your page.
You can check the current URL with:
window.frames[0].location.href;
But the easy way to see if the iframe loads another url, this should work:
<iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe>
The onLoad would trigger for each url change.
EDIT:
You better test with your own examples, since I cannot give you a working example on fiddle because of the cross-origin problem. If the iframe is in the same domain, you should be able to jQuery the Dom with this:
window.frames[0].$('#surveyMonkeyInfo').contents().find("div.embed_title").val() == 'Thank you for completing our survey!'

How to get element's id in click event inside an iframe?

<iframe id="myiframe" src="doc.html">
<button id="btn1"></button><!-- how to get this id? -->
</iframe>
$('#myiframe').on('click', function () {
alert(this.id);
});
I want it to alert "btn1".
No. There is no way to do this for security reasons.
The only way to communicate between an iframe and the current page is if the url in the iframe already contains some javascript and updates the iframe url. The iframe then put some data in the url that the page can retrieve.
If the target of the iframe does not belong to you, this is impossible.
See jQuery cross domain iframe scripting for a complex workaround which could possibly make this work.
This is not recommended though; the best approach would be to rearchitect the document and try to solve a different problem. For example, you could request the remote content via an ajax call and insert it into your document.
For example, using jQuery.load:
$(".target-element").load("doc.html", null, function() {
var id = $(".target-element").find("#btn").attr("id");
});
this.id isn't valid I think, it would also be technically selecting the wrong id(#myIframe)
you'd want something like this.children().attr('id');

Is it possible to catch a JS event for a user who navigates inside of iframe (same domain)?

I have a page that has a number of iframes that load different pages on the same domain. Each iframe has normal pages which have links, forms, etc.. What I need to do is add a piece of JS to the parent page which would catch event for user navigating inside of any iframe. So if someone clicks something inside of one of iframes or submits a form or does anything like that, I want to catch that. I've tried different variations of this with no luck so far
$(document).ready(function() {
$("iframe").each(function(){
$(this).bind("unload", function(){
alert(1);
});
});
});
You could do:
$(document).ready(function() {
$("iframe").each(function(){
$(this).contains().find('body').on("click", "a", function(){
alert('1');
});
});
});
in this way from the parent page you attach an event handler that detects a click on every link inside the iframe and alerts 1. This should work only if the iframe is on the same domain of the main page, otherwise contains() does nothing.

Categories

Resources