For example:
I have a main page with an iframe in it and my iframe contains a button. When I press the button inside the iframe some scripts are executed, and the design of iframe is changed. Texts appears and other stuff.
How do I detect when iframe scripts are run? (Or the button was pressed?)
The iframe is from a different domain.
If the contents of the iframe come from a different domain than the outside page, then you can't - the browser deliberately stops you from being able to tell much about what is going on inside the iframe. What you can do though is grab the URL the frame is pointing to if it changes.
If it's running in the same domain, you can just access the elements inside the iframe pretty much the same way as you would normally via the document property of the iframe
If the main page and the iframe are on the same domain, you can make the javascript in the iframe call a function or access the elements of the parent frame.
So at the end of the script in the iframe you can do
parent.script_is_finished();
If you have control over the script in the iframe, you could use window.postMessage to communicate with your main page, even if they are in different domains.
Support for this is limited to FF3+, IE8+, Chrome, Safari(5?), Opera10+
Here's a demo on html5demos.
As an update to the fact that the iframe is from a different domain:
Short answer: No. You can't detect clicks within an iframe from another domain.
Longer but still short answer: The reason you can't is the same reason you can change the contents of the iframe -- it'd be a security risk unless the iframe is on the same domain. You simply can't track user activity within an iframe sourced from a different domain.
Sorry, but I hope that helped!
Related
I have a iframe on my web page. is there a way or JS library I can use to know which word user click within the iframe?
In short, no.
In long, yes.
If the iFrame is loaded on the same sub-domain and domain name as the page that contains the iFrame (www.example.com), you can interact with it without doing anything special.
If your iFrame is loaded on the same domain, but a different sub-domain (sub1.example.com, sub2.example.com), put this line of javascript at the top of your javascript file, in both the iFrame page and the page that contains it:
document.domain = 'example.com';
This will make the iFrame "think" that it is ok to communicate through javascript.
If the iFrame is on an entirely different domain, there is nothing you can do.
I was studying how Disqus and other embedded wigets are implemented, and I came to realize that they don't use an enclosing iframe where all their widget is run. What they do is to append elements dynamically to the embedding page through JavaScipt and then run almost every form or button in some iframe. What's the point of doing this? Couldn't they just wrap everything in an iframe and then change the parent window URL (to allow navigation) through some kind of cross-domain messaging system such as easyXDM? Can anybody point out some benefits that arise from having some elements not inside an iframe?
Code inside an iframe may not be able to set cookies as browser thinks it is an advertisement.
Iframe content cannot control the size of the outside iframe, so iframe needs to be created with javascript and javascript needs to be loaded externally so that external site has total over iframe size.
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.
We have an application that reconstructs external web sites in an Iframe from within our domain so we can use tools that run in the browser to inspect the external website. This is an unavoidable requirement since we need to gather information about the external page using JavaScript. If the page were not reconstructed from within our domain, we would run into cross site scripting issues.
The problem is that the scripts on some pages redirect out of the iframe, which stops our tool from working.
My query is whether there is a way to allow the scripts to run within the iframe, but not to affect the page that contains the iFrame?
Hope that makes sense - thanks!
No I do not thinks so.
If the Iframe is loaded from the same domain any script will have full access to the page.
The redirect out of the page you refere to is the page protection from Hijacking where another site tries to use the page contents.
By ridirecting out of an iframe they avoid that.
You could try using a separate window (window.open) to load the reconstructed external sites instead of an iframe. As long as they are at the same domain, they'll still be able to communicate, but the child window won't be likely to mess with your main window.
Alternatively, your outer window can do nothing, and be at a different (sub)domain from your control window. Your control window is an iframe in your outer window, and the reconstructed external site is another iframe sharing the same domain as your control frame. Now if your 'external' iframe tries to do something with window.top (besides navigate) it will fail because of the cross-domain policy, but your control iframe will share the same domain as your 'external' iframe, so you can inspect and manipulate it.
If you use the second approach, frames will still be able to navigate the top window. You can prevent it by adding something like this in the top window:
window.onbeforeunload = function(){return '';};
Now you'll be prompted with a dialog box if anything tries to navigate the page, and you can abort navigation. This will probably fix your current approach by itself, but it may be best to have the top window at a separate domain in case the external site tries to do anything unexpected with it.
Can the iframe access its parent if I changed its src to "about:blank" after loading it in the parent page?
Note: the iframe is in another domain not the same as the parent page.
No. If you change the src attribute of the frame to about:blank the content of that frame will be replaced with the blank document, and any javascript running inside the iframe will terminate.
If you need a way for the two to communicate, one of the ways to go is to expose some kind of JSON based endpoint that can be called from one of the domains, while the other polls for a result.
UPD: Regarding your pronto question, I would guess they don't use an iframe. Pronto is a bookmarklet, which allows code to run in the "outer" page. While I didn't verify this, I'd guess they are able to make the browser page load their JS library via an injected script element, and display their UI that way.
Generally, no. This is known as cross-site scripting (XSS) and is considered a security risk, so most browsers prevent it.