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')
});
Related
I have an iframe on my site.
I do not own the website in the iframe and can't edit the code.
When a user clicks a link inside the iframe the iframe redirects the top level url.
I want to detect when the page is about to be redirected and display a notice saying they are about to be redirected. I have tried using unload.function but it does not get triggered.
$(document).unload(function()
{
alert(1);
});
Is it possible to execute js after the user has clicked the link in the iframe before the page is redirected?
Thanks
In the top level frame - i.e your code attach a beforeunload event to the window and then something like this...
window.onbeforeunload = function () {
return "Are you sure you want to leave?";
};
This answer goes into detail about who will actually see your custom message - Is it possible to display a custom message in the beforeunload popup? - Most browsers ignore the string even though its in the spec
I have a page with an iframe on it, and I need a button inside the frame to do a redirection to another page, if I do it the normal way the content of the iframe will be reloaded, what I need is the main window to change its url.
I havent posted any code below as I dont know if this is even possible
Yes this is possible. You have to send a message from the iFrame, when parent receives the message, then you do something. Here is an example: http://jsbin.com/necuvi/2/. Here is some documentation on how it works. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I have MAINPAGE.php which launches an iFrame. In this iFrame there can be any link opened and the user can click links and view different pages in the iFrame.
What I would like is that each time the user navigates to a page within the iFrame, the parent window will include the url of that page but just as a reference. So if I visit google in the iFrame the MAINFRAME.php should be changed to MAINFRAME.php#http://www.google.com. Then when I visit Yahoo, the url should be changed to MAINFRAME.php#http://www.yahoo.com.
This change should be textual only and should not affect navigation at all, so using _top or "top.window.location.href" and co. is not an option as it will exit the iFrame.
The idea is to have the ability to access the URL of the page in the iFrame from the URL of the parent.
Any idea?
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.
This is a tricky one. I have a link on my page that opens a Colorbox iframe to an external website. The external website contains links to another page. When the user clicks those links, I need them to load up in the same iframe.
The problem is, the link on that external site is set to open a new window with target="_blank". Therefore, instead of this page loading within the same colorbox iframe like I need it to, it opens a totally new window.
Is there any way to bypass it so that these links within the iframe do not open a new window, and instead load that window within the same colorbox iframe?
Thanks in advance!
_blank will always open a new window, you could try _TOP instead, it should work something like this;
<a onclick="parent.$.fn.colorbox.close();" href="NEW SITE" target="_top">
open in parent window with animation
</a>
Do you control the document that is being displayed in the iframe? If so you could handle things a little differently so that you only opened new windows if the document isn't being displayed in an iframe. But if the document you are iframing isn't under your control then I don't think there is anything you can do about it.