I have some pages with iframes in them. I want to add a link/button inside the iframe, to make the browser go back one page in history. But I want the PARENT to go back, not the iframe itself.
I originally had this, which makes the iframe page go back (if it exists):
« Go back
I've tried window.parent.history.back() and window.parent.document.history.back() but neither one works. There are no cross-domain issues accessing the iframe from the parent and vice-versa.
I've done some toying around to try and answer this question - at least in IE8.
Navigation within the iframe appears to impact the parent's history. I tested this by adding code within the parent page and within the linked child pages that uses alert to show the value of history.length. Navigating to a new window within the iframe causes history.length to increment on the parent page and on the child page.
The only way I can think to control the back behavior as you desire would be to use history.go(XXX) where XXX is a hard-coded number or is derived by keeping track of the number of page loads since they loaded the iframe.
My personal suggestion would be to explore an alternative to iframe if you can - this approach has a bit of a code smell to it. :)
You can use this:
back
or:
back
It's work for me!
;)
Related
I'm placing a form (that I host) on this demo page (cross-domain).
I can add code on both parent and child.
The iframe auto-resize works perfect (using iframe-resizer), but when submitting the form on mobile or desktop with narrow window (so longer scrollbar) the thank you message is not visible right away. You need to scroll the parent page up a bit to see it which may cause confusion to people.
The iframe is perfectly shrunken down to the right size, but somehow need to do a custom postMessage to tell the parent to scroll/jump their page up to the top of the embedded iframe.
Any thoughts on how to use the already existing iframe-resizer script or can i just do a postMessage without it, if yes how?
Thank you in advance!
Have you tried
document.getElementById('thankyou').scrollIntoView()
So I've read about the HTML5 sandbox property and I understand that if I want to prevent an iframe redirect its parent window I can use the sandbox property leaving allow-top-navigation out. However when this is done, if the iframe was originally relying on top level redirection, what happens in its place is that it redirects to a blank page, effectively breaking navigation.
Can I prevent the iframe from tinkering its parent window while still allowing "top level" redirects, only letting these work within the context of the iframe instead of being top level?
Edit: For context, I'm working with a third party and its page has a form with a target _top. If the iframe is sandboxed, upon submitting the form users get a blank page, if it's not sandboxed the entire page is redirected. I'm looking for something that would allow to submit the form and show the result within the iframe itself.
With HTML5 the iframe sandbox attribute was added.
At the time of writing this works on Chrome, Safari, Firefox and recent versions of IE and Opera but does pretty much what you want:
Allows the iframe content to be treated as being from the same origin as the containing document
<iframe src="url" sandbox="allow-same-origin"></iframe>
Browser Compatibility
Some Useful links
w3schools for sandbox
developer.mozilla.org iframe
-
You can use the onbeforeunload property and determine if you wan to redirect or not.
Here is the docs page for it
Basically what I would try is this:
Make a function that adds the sandbox attribute with everything, just leaving out the allow-top-navigation, to the iframe
Bind a function to the onbeforeunload property of the iframe that calls the function that adds the sandbox attribute (be sure not to return anything because a dialog will pop-up)
This should work because the request is made in the iframe first, and then we can prevent it from carrying over to our top level window.
Another thing you should check is if you maybe left out the allow-formsoption, which can cause what you are describing.
Please let me know if any of this worked.
Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...
Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.
If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.
I am using colorbox for showing pop ups. Is this possible to reload parent window without closing pop. I mean I want to do actions/events in the pop up and the changes should be displayed at parent window.
Thanks
You can definitely play with the elements in the page from within the colorbox. You can't, however, "refresh the parent window" as you stated in the question title, because then you will also lose the colorbox (which is a part of that page).
But judging from the rest of your question, you simply want to make changes in the page. If your colorbox is not in an iframe (e.g., you have not explicity set the option iframe:true) then it's pretty straightforward. Just create event handlers that are called from actions performed in the colorbox.
If you are setting the colorbox to open an iframe, there's a couple things to be aware of:
The iframe page (the contents of your colorbox) must be within the same domain
Use the parent. in the iframe's JS that references the parent page
Here's an example of the colorbox code you would have in the iframe page:
$(document).ready(function() {
$("a.internalColorboxLink").click(function() {
parent.$("body").append(
parent.$("<div/>").text("MY NEW TEXT")
);
});
});
In fact, this is the almost the same code as would be in the inline colorbox (that is, the js in the parent page). Simply remove the parent references.
I can post more concrete examples if you update your question with exactly what you want to do.
I'm using an iframe to display content that has links. When the user clicks around in the iFrame and hits "back," it goes back in the iFrame. This behavior is OK. However, once they're back to the first page of the iFrame and they hit "back" again, the entire window is taken back to the previous page. This is unwanted.
To prevent this behavior, I've put a fake "back" button within the iFrame. (In most cases this is bad UI, in this case, it works well). I'd like this fake back button to only go back if the previous page is the iFrame's page -- not the entire page. When they hit the fake back button in the iFrame, it should only move that iFrame back, nothing else. Is there a way to do this? Does an iFrame get its own history object?
Something that might be of benefit: the domain of the iFrame and the main window can be assumed to be distinct. So, if it's possible to read the "global" history object, I can check to see if the previous page was mine by checking to see if the domain is mine. If the domain is not mine, the fake back button will be hidden or not do anything.
Help greatly appreciated, and happy holidays!
document.location.href = document.referrer;
You should be able to use the javascript history object to push the user back; but you won't be able to stop it when the iframe-clicking runs out and the main page wants to go back. And you can't stop it because that's intentionally locked down pretty well in most browsers to prevent people from messing around with it maliciously.
You could write your own history tracking code and have the back button pop items off that stack, stopping when the stack is empty...
If you're using some complicated nesting of links - perhaps some javascript-based tree menu? That way the iframe never has a page refresh?
Without having an example, I have to say your design seems like poor UI... when I hit back, I don't want the navigation to change; I want to go back to whatever page I was just on.