I am trying to intercept links clicked on a page including those inside an iframe. This is the code that I have but it is not working. Any ideas what I need to do?
$("#container").delegate('a', 'click', function(e){
//do stuff
}
Container is the id of the div just inside the iframe.
Thanks in advance for any advice
You need to reach inside the <iframe> and set the delegate there, you can do it like this:
$('#myiframe').contents().find("#container").delegate('a', 'click', function(e){
//do stuff
}
Edit - Mailslut makes a good points below, if the iframe isn't on the same domain (and port), you can't do anything like this. If that's the case and you want to know more about why, read about the same-origin policy there for security reasons.
Why not add the event listener inside the iframe and then call the parent / opener to notify the event.
If you the contents of the iframe is on a different domain, you won't be able to perform this as it is classed as "click-jacking", which was a big security threat.
Related
I have a javascript file that I am loading for some of the pages for tracking different events. Javascript has a list of selectors and just attaches listeners to them and call a tracking api when selectors are clicked.
Some of the elements are links. I am wondering if there is a possible case when navigation to links href will be done before the attached listener will run and call the tracking api.
Don't know if this can help you, but to navigate to the URL and logging after it, would'nt this be the same as logging on each page load? You might be able to get the URL of traffic origin to trace everything.
Or, if you implement pjax, or load in new pages through ajax, you can wait for the new page to load and log the request after the loading is done.
Or, you could end up doing some voodoo like this:
$(document).on('click', 'a:not([href="#"])', function(e) {
e.preventDefault();
// Do logging here
window.location = $(this).attr('href');
});
(edit: oh yeah, I used jQuery...)
Since you already have specific selectors for the elements you bind the tracking event to, you could simply target all links with said selector, prevent the default behaviour with preventDefault(), call the tracking api and redirect (possible as a callback if the api call allows it) to the url in href property of the link.
I'd like to make a tool which allows to process data picked from an iframed page.
Something similar to this:
http://jsfiddle.net/jr6uG/4/
I stopped on events (hover, click, etc.).
Is it possible to do it my way? Is there a better way?
I need somthing like this:
$('iframe body *').bind('click', function(event){
console.log('clicked', this);
});
The iframe runs a separate DOM, meaning there's no interoperability between DOM objects in the original document and the iframe document.
You'd have to do this over the network. A little like JSFiddle captures console logs from within the iframe generated to the console in the document you're viewing.
To process data picked from an iframed page, as you're intending to do, you'd be looking to direct any page that you're trying to process through a bespoke proxy, where you could inject your own scripts, for example, to create an alert when an element is clicked.
This is the question:
I have an iframe that displays any web page (not necessarily developed by me).
On this page may be attached events (which presumably I do not know).
How can I dynamically intercepting these events and store them for later replicate?
For example:
suppose that when the mouse moves over a certain div it changes color.
I would like to make sure that when you trigger the event that would change color to the div it is "registered" with all a series of information that will allow me (without user interaction) to replicate it at a later time.
Ideas for both the recording and subsequent replication?
The short answer is: you cannot.
You cannot access the document object of "any web page" with JavaScript on your page if it is on a different domain, which I assume if you say "any web page", because of the Same Origin Policy. You would need the website in the IFRAME to cooperate with your script to achieve this, which will not happen with "any web page".
IFRAME on same domain
If your web page is on the same domain then you can access the events of the IFRAMEs body element by adding a listener for every event you want to catch like described here. This is possible for all events that bubble up to the body. So if you have Events that are prevented from bubbling upwards to the body, they will not be catched with this solution.
jQuery('#website body').on('click mouseover mouseout', function(event) {
console.log(event.type);
});
Assuming you have an IFRAME with the id website you can catch the events you wish by listing them separated with spaces as above. The example catches click, mousover and mouseout.
Maybe this is closer to what you want?
Add event handlers to your divs. For your example you could use
$('#div').mouseover(function(e) { ... })
or
('#div').on('mouseover', function(e) { ... })
For 'replication', you'd have to store information about past events in some object. You could even store the event object itself.
I have a in an iframe, that calls a function from the parent page. The function is window.location, however this does not change the url. Is there a way to have the iframe call a function from the parent page, that will cause the iframe to change url? I also had a basic qustion, if I have an iframe, and click on a link that brings me to a new page, does the parent page remain open?
Thanks in advance for your help. Sorry if I sound like a complete idiot, I am new to javascript.
Dave
window.location is not a function, it s an object.
To do what you want, first make the iframe call a special function from it's parent.
parent.sendMeToGoogle();
And in the function (in parent) do something like:
function sendMeToGoogle(){
document.getElementById('iframeID').src="http://google.com/";
}
If what you really need is to change the parent URL, you can use window.top.location.href='http://anotherURL.com' even if they are in different domains, from the iframe page.
I assume that you want to do more in the function of your parent page; if not you can just change the url of the iframe without calling the parent of course...
As for your second question, the iframe behaves like an ebmedded page: you can browse all you want in the iframe without affecting the parent (except of course with javascript calls like the one you want to use), but browse with the parent page and you will lose teh iframe as well.
Hope that was the explanation you were looking for :)
http://jsfiddle.net/TQjgn/2/
Does anyone see the problem with it? (I am trying to make a scrolling iframe that stops when one mouses over it) Oh, and this is in javascript.
Crossframe-Scripting is not possible when the two frames have different domains -> Security.
That's why using jsfiddle.net you can't make the iframe scroll.
Check this: http://javascript.about.com/od/reference/a/frame3.htm
Now to answer your question: there is no solution or work around, you simply should check your website-design why there must be two frames from different domains that changes the url of the other one.
If you need that scrollbar why dont you use overflow property CSS overflow Property
Look into setInterval and setTimeout.
Your code will attempt to run to completion before ever accepting user input.
Iframe content is in a different domain so it can not interact with it due to the same origin policy.
onload event of iframe could fire before the onload event is registered.
You really should not do the do while for pausing time, there are better ways of doing it with setTimeout.
It looks like you are thinking of myIframe.mouseover as a value that will be either true or false depending on whether the mouse is over the element where it should be an event handler.
You need to learn about JavaScript events, e.g.
myIframe.onload = function() { /* something that makes it scroll */ }
myIframe.mouseover = function() { /* something that makes it stop */ }