Develop Reference

Is there a way to track user navigation inside iframe

I wanted to know the url the user visited inside a iframe tag
I know it need same origin policy doesn't allows it
Is there a way to achieve this?
For eg: I have a website inside which I used ifame to show another website I wanted to know what pages of another website user visits inside iframe tag website

Replace document with the iframe's document

I have a webpage that displays an iframe containing a random website. After 10 seconds I want the website within the iframe to replace the "parent" website.
Let's say my website www.aaa.com has an iframe containing the website www.bbb.com. After 10 seconds I want the browser to replace the currently open www.aaa.com with www.bbb.com without reloading the page so the user doesn't lose their state. Basically replacing the document and updating the URL bar accordingly.
I can't just get the URL of the iframe and change location as the user could for instance be watching a video and it would start again from the beginning because of the page reload.
I've been searching for this for a few hours and there is absolutely nothing that I could find.

You can set window.location = "//www.bbb.com" but it will just fetch that webpage as usual.
You can set an url in the browser using window.history.replaceState(null, "test", "www.aaa.com/mypage?foo=bar") but it will fail crossdomain (it will even fail using a subdomain on your site).
And you cannot get the contents of a cross-domain iframe.
These are all related to cross-origin security. There may be exceptions, such as when you have elevated permissions (browser plugin). Some functionality may be available using CORS and what not, but you need cooperation from the owner of the other domain.
In short, the closest to what you want is probably to set the iframe to the full width/height of the window.

How can I remove an iframe within an iframe on an external web page like Pinterest's bookmarklet?

I am in the process of making a bookmarklet that allows users to highlight text on an external web page.
It runs JavaScript code that appends a JavaScript file from my server to the current web page that takes the title of the current web page, the URL of the current web page, and then the highlight text of the current web page. Finally, the user would click a button to submit the data to my web server to be saved into the database.
I have two ways of doing this: (1) have a popup with the data in the URL as parameters, or (2) to have an iframe inserted into the current web page with a form to submit the data.
In the one with the popup (1), the users browser auto blocks the popup for every domain. How do I get around this? It seems like Facebook share and twitter tweet buttons bypass the popup blocker though...
In the one with the iframe (2), I want to remove the iframe from the DOM after submitting data. However, if I'm on another domain, I get an error saying I am denied access because of origin policy something. I know it's possible because Pinterest's bookmarklet does this, it inserts an iframe then removes it from the current DOM.
I am looking for information on how these solutions work, so I can do something similar with my bookmarklet.

I resolved this by adding a post message callback after saving the data from the iframe.

Cancel out of an iframe

I have page(lets say https://example.com/dir1/tidy.html), that embeds an iframe that hosts content from another domain (lets say https://foobar.com/dir2/whatsup.html). If the user presses Cancel inside the embedded iframe page, is it possible to redirect the parent/container page to a different url (like https://example.com/dir2/yeah.html)? How do I accomplish this?
I'd have thought that since the iframe page belongs to a different domain, the same-origin-policy would stop me from using javascript to send events/actions to the parent page.

The same origin policy prevents you from reading data from the document on the parent domain.
It doesn't stop you from:
top.location = "foo bar baz";
Or even just:
...

How can I navigate to another page, from an iframe?

I have a page with one button. When clicked, that button navigates to http://google.com/
$("#button").click(function(){
window.location="http://google.com";
});
I would like this navigation to work when this page is embedded within the iframe. I don't want to affect the outside host page, but rather only the contents of the iframe. What's a good cross-platform way to:
Detect if I'm contained in an iframe
If not, navigate like above.
If yes, navigate the iframe only?
(I'm going to try to implement the algorithm I just described, but regardless I think this question is interesting enough to be posted. If I succeed, I'll post my solution)

1) Detect if I'm contained in an iframe
if (window != window.top) {
// the page is inside an iframe
}
2) If not, navigate like above.
navigate like above
3) If yes, navigate the iframe only?
When you write window.location.href = 'http://www.google.com'; you are navigating the contents of the iframe, not that of the top page. If you want to navigate the top page, you can only do this if this top page is on the same domain as the iframe and you could use window.top.location.href.
UPDATE:
There is a security mechanism built in browsers which forbid you from redirecting to sites that set the X-Frame-Options: SAMEORIGIN response header when inside an iframe. That's the case with http://www.google.com. Simply navigate to this site and look at the response HTTP headers with FireBug or developer toolbar you are using and you will see this header. You cannot redirect to it and you will get the following error message:
Refused to display document because display forbidden by X-Frame-Options.
It's basically a security mechanism implemented by some sites whose authors didn't want you to embed them in an iframe.