Is it possible to scroll(0,0) to the top of the parent page when the user browses in an iframe? For example, we have an iframe that is the entire height of the page with search results. When you click the next page button in the iframe, the focus stays at the bottom of the page.
I'm not even sure if it's possible to detect this. The iframe src value doesn't actually change.
P.S. I don't know why this site must use an iframe, but IE6 is the standard browser so I didn't ask questions.
Actually, the onload event does appear to work when navigating within an iframe.
<iframe src="http://mysite.com" height="2392px" width="100%" name="searchFrame" onload="scroll(0,0);"></iframe>
As an alternative, you can have the iframe ask the parent frame to scroll to the top with
parent.scrollTo(0,0);
I haven't researched the official browser support for it, but it works in IE9, FF10, Chrome 17 and Safari 5.1.
<iframe onload="parent.location= 'http://mysite.com/page.html#nameofdivonthetopofpage';" ...
Related
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.
I have an iFrame within a parent page the length of the content varies from page to page in the iFrame so I would like to have the page jump back up to the top in certain situations.
This works fine in IE where breadCrumb is the id of a div in the parent window.
<script>
window.parent.location = "#breadCrumb";
</script>
It jumps the page to the right spot and the url is the parentwindowurl.aspx#breadCrumb
However in Chrome and Firefox this does not work it changes the page to the url iFrameurl#breadCrumb which replaces the parent page and has no breadCrumb div.
Does anyone know how I can get this to work in Chrome and Firefox?
Or is there a better alternative I should be using?
Try this one
window.parent.location.href = "#breadCrumb";
Assuming you want it to the very top, it's easy
https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop
window.parent.scrollTop(0);
sorry it might actually be
window.parent.document.body.scrollTop(0);
if not, please let me know the error
The location hash is normally used to scroll to an anchor tag with a matching name attribute, so you would need to have a tag like:
<a name="breadCrumb"></a>
in the parent frame in order to have the browser scroll to that content with a location hash.
I'm not familiar with this behavior on div tags; that might be an IE-specific feature.
I have a page with a fixed header div like a tool bar and an Iframe which loads content form the same/different domains.
The problem is whenever a link inside the iframe is clicked, it scrolls the page to the top hiding the toolbar itself. This happens in desktop/mobile webkit browsers.
Note:- I found the reason for why the iframe scrolls the parent page when any link inside it is clicked, it turns out that if the anchor tags within the iframe have empty hash values i.e href="#" and if they are clicked then it causes the parent page to scroll to point from where the iframe starts. This happens in webkit browsers only for me. This is not reproducible in FF.
If you are dealing with the problem in Javascript simply use this code:
ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)
or
<script language="javascript">
function totop() {
scroll(0,0);
}
</script>
and in your html for iframe, add an onload attribute as below:
<iframe name="iframe" onload="totop()">
Got this 2nd solution from another forum, and changed to the 1st one to suit my requirement as I am creating the iframe element and setting its properties in javascript and not in html. It worked for chrome as well as IE. FF didn't have the problem in the first place.
I want to allow any page to be loaded inside an iframe. It's for teaching purposes so I want to know if it's possible to force let's say:
<iframe src="http://www.wolframalpha.com/input/?i=5*sin%28x%29" width="400" height="100">
to stay inside the iframe. By default it has some kind of javascript that opens in full page.
UPDATE: What if i use frames? (please don't throw bricks at me) Could they know if the page is inside a frame?
If the page itself wants to break out of being framed with it's own javascript (which apparently this page is doing), it can do so and I know of no way to prevent it other than turning javascript off in your own browser which obviously isn't an option for general viewing.
On some browsers, you can set an attribute on the iframe element that sets a security policy that prevents the iframe from executing JavaScript. I don't remember the attribute name and not sure which browsers support it (I'm sure ie does, not quite sure about the others). If you have problem finding more details, I'll look it up when I get home (on a mobile right now)
edit: found it - security="restricted". Seems to be IE-only.
If you have links outside of this iFrame and want them to load into that iFrame on the same page, you'll have to give it a name, then target the named iFrame within your link's href.
<iframe src="http://google.com" name="myframe" hieght="100" width="100"></iframe>
<br />
Derp.
However, if you're loading a page into your iFrame that's loading links with target="blank", then those will go to a new window; unless you don't have access to those pages, you won't be able to change the links (short of writing JS to dive into your iFrame, etc).
Is it possible to build a Firefox extension that displays a floating, persistent iFrame over the page content?
I know it's possible to add iFrames using XUL. For instance, you can add an iFrame to a persistent sidebar. However, I want the iFrame to float over the page content, not cause the content to shrink. So far, my only option is to add the iFrame to the DOM, then use CSS "fixed" positioning to float the iFrame.
The iFrame must also persist across page loads, exactly as the sidebar does. Adding an iFrame to the DOM, unfortunately, causes the iFrame to vanish when the browser renders a new page (e.g., after clicking a link).
Any clues?
Thanks!
Another add-on you can look at is Shopping Helper It has an iframe at the bottom whenever the page is displayed a product
Yes. I was able to do this by setting the attribute noautohide in the panel you use.
E.g.
<panel id="yourOverlay" noautohide="true">
You might be able to do something like this with Greasemonkey, it allows you to customize how web pages look and you could make your script available to others.