Track navigation in iframe - javascript

Suppose that I have an iframe in my HTML page.
<html>
<body>
This is my page
<button> Button </button>
<iframe src="www.example.com"></iframe>
</body>
</html>
So the user can click on links on the page www.example.com in the iframe. Is it possible to use JavaScript to track what links the user navigate to, and then when the user clicks Button, send those links to my server?

You will not be able to track events in the iFrame from the page that hosts the iFrame. You could potentially track navigation from within the iFramed page and then sending the URL information to the parent page using window.postMessage. This would require that you have control of the pages inside the iFrame and you would only be able to track the clicks on pages you control and that are properly set up to send postmessages to the parent.
You can read more about [window.postMessage]following this link. A caveat is that some older browsers (IE7) don't support postMessage so you could use a library like Window postMessage plugin, which uses window.location.hash polling for those browsers. I have used this library previously and have had success with it.

Related

Trigger redirection to another page if specific page is loaded within an iframe

I am using Limesurvey to create a customer survey. As I want to embed the survey at my company's homepage, I am using an iframe to make that happen. This ensures that I have my official header and footer available and I don't have to rebuild that elements in Limesurvey.
Limesurvey offers a possibility to redirect to another page after somebody has completed the survey (e.g. a thank you page). As I am embedding Limesurvey, I cannot redirect to my offical thank you site from my company's homepage as I would have double header and double footer.
What I have thought of, is to redirect to a dummy site. From the parent site, I want to check for that event and trigger my redirection to my thank you site.
I have no idea how to do that in Javascript. How do I define an event listener to check if a specific site has been loaded within the iframe and then fire my redirection in the parent.
Thanks a lot!
You can inspect the URL in the IFrame using <element>.documentWindow.location.href if it is on the same domain:
e.g if your iframe had id 'frame'
document.getElementById('frame').documentWindow.location.href
However, You can't inspect the URL inside an IFrame if the IFrame is on a different domain, this is due to a security mechanism in modern browsers.
If you are not in the same page it will raise an exception:
Error: Permission denied to get property Location.href
See this SO answer for more detail also as noted here the property is named differently in chrome: documentWindow is called contentDocument in Chrome

Popup when iframe redirect top page

I am working on a payment website, which needs to integrate a 3rd party website inside an iframe. However, at some point, the user can click a button inside the iframe, which redirects the parent window to another URL.
I cannot touch the 3rd party code.
Is it possible to capture this URL the parent window is being redirected to, stop this redirection, and pop up another window for that URL?
Thanks for any help.
You will be able to detect when the iframe's url changes, but you will not be able to look at what the new url is. That may be just enough. If the user clicks something in the iframe, and the iframe changes url, then you can detect that and redirect the parent window.
Plain javascript solution:
<iframe
src="https://target.com/page"
onload="alert('iframe has loaded or changed')">
</iframe>
jQuery solution:
<iframe class="target-iframe" src="https://target.com/page"></iframe>
$(document).on('load', '.target-iframe', function () {
alert('iframe has loaded or changed')
});

control idle time external page

I made an simple web page that reference an external page. Are there way to rollback to my web page when the external page to stay idle ?
example my internal page
<button class="button"> <a href = "https://www.searchsite.com"> Answer</button>
example my control page
<script language = "JavaScript">
location.href = "C:../mypage.html";
setTimeout("document.location = 'C:..mypage.html'",1000);
</script>
Instead of sending them to the page, where you have no control, load that page in an iframe. The iframe can be either created when the page loads (if the url is static) and just hidden with css or you can create the iframe with javascript when they click. Then use javascrpit to set the iframe size to the full width and height of the browser window. It will looks like the other site but you still have control.
In the event they resize the browser you may need to have a resize event listener. Also you may wish to modify the browser history so if they hit back they go back to your site.
Then when the timeout limit is reached you can use the setTimeout to just hide or remove the iframe.
Do note that some websites prevent the page from loading in an iframe. So test that first. If they don't allow it things get quite a bit more complicated you would need to use php to grab their pages html, css and javascript, make the changes you need, and then load it in your site.
Based on the url, in your code sample, I must assume you wanting to load some search engines page, many of them have API's you could use to incorporate their search functionality into your site.

How to click iframe element in wordpress (all pages)?

I have a wordpress website, where I have pages with artists. This is an example: http://chasefetti.paradigmrecordsinc.com/ of a page from my website
On the top I have an iframe from arena.com
I want after the page loads to click the play button.
If I do it on the arenas page http://arena.com/artist/chasefetti like this (using firebug):
document.getElementsByClassName("fg icon-play-fg")[0].click()
it works, but on my website I guess it doesn't know about accessing the iframe.
How can I specify to access that iframe ?
Also the full mission that I gotta do is to play that button for each page. I am thinking to add a jquery that does what I want to do, to the templates page.
My main problem is accessing that element from the iframe
As far as I know(I tired it once) you can't do that, unless the source of the iframe is on the same site as yours, which isn't the case here.
Also check this same-origin policy.

Submit form of iframe which is in different domain from parent window

I need to submit a form which is loaded inside a iframe.
But this src will be loaded from different domain from its parent page.
I have tried Window.postMessage which can communicate to inner iframe but I doubt for cross domain page also for which we cant have to source control we can't add listener to that page.
So, Any help on this for iframe cross browser site communication without any code added on the iframe page.

Categories