I'm interested in linking to or embedding an external page, scrolling to a specific point. Is this possible, or do cross-browser securities prevent it?
One workaround I've considered is creating the iframe within a div, giving the iframe a negative margin and then overflow:hidden; the container div.
Thanks.
A possible solution could be to use JavaScript to scroll the page. However, if the page you are embedding is on a different domain, you cannot access its content with JavaScript if it is in an iframe (due to the same origin policy). However, if it is on the same domain as the host page, you should be able to access it using JavaScript and then scroll using the window.scrollTo(x,y) method or similar (see this page on MDN).
Also, if the page you are embedding has a named anchor (<a name="blah">) or a block-level element with a specific id (<div id="blah">) at the point you want to scroll to, you can link to it or embed it by using a URL such as http://example.com/page#blah and it will scroll to blah automatically. This is not under the same-origin policy, so you can do something like <iframe src="http://example.com/page#blah"></iframe> and the frame will automatically be scrolled to blah, even if it is not on the same domain as the host.
The "iframe with negative margin" solution you mentioned could work, but that might be hard to implement and would probably cause problems, especially if you want full cross-browser compatibility.
Related
My object is to remove the scrollbars of an iframe for cross domain servers, which I don't have access to.
Page A has an iframe which displays contents of an external server
The content is not fixed, its height changes with time so I can not fix the height, it has to be dynamic.
It has to be handled with JavaScript. I have a list of objects corresponding to the users selection. When a different selection is made, different content types are shown.
I have tried to a solution with postMessage, but it does not solve the problem as I don't have access to the server. I was thinking more of a view, which resizes the iframe when the page is loaded.
You can't. There is no way to determine the size of a page in a cross-domain iframe without explicit support from scripts running on that page. Since you've already said that you can't modify that page, there's no way to do this.
I am attempting to hide an element loaded in an iFrame using CSS/jQuery/Javascript. The iFrame content is located on a different domain. I am trying to hide a button on the page loaded inside the iFrame. The buttons HTML is:
<a href="/Communication" id="lbtnMessage" class="bsrpBlueButtonLink">
<div class="NavButtonMess">
<span>Messages</span>
</div>
</a>
I have read mixed answers around the Internet on whether or not this is possible. I just need to be able to hide this block of code in the iFrame source. I this at all possible?
One possible solution is to use postMessage, obviously you need to control both domains.
This jquery plugin handles it pretty well : http://benalman.com/projects/jquery-postmessage-plugin/
If you don't control both domains then, due to security this is impossible. All you can do, is resizing / hiding the iframe.
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).
Background:
I am trying to iframe an entire external website for a project. Some links within this external site are within even more frames. They use js to access the top window and set its location according to the href value of the link, which results in the new page loading completely outside of my iframe (which I would like to avoid).
Question:
Has anyone dealt with this/is there a way to deal with this? Ideally I would like to prevent the iframed site from accessing frames outside of its own.
Note:
As per my knowledge it is not possible but still want to have a second opinion
Thank you very much for any help or insight,
To get around the restriction for the iFrame sources, the only way you can do it by setting up a web proxy script on your website.
<iframe src="proxy.php?url=http://othersite.com/">
you should be able to find some proxy implementation on some script site.
I am making a web widget using iframe and javascript and i would like to make my iframe resizable to it´s content (which is loaded from other domain).
I have done some search(inclusive here at StackOverflow) and i find a couple of topics but i couldn´t find any conclusions about this issue.
Is this possible or not?
Because atm i have to set my iframe height to the maximum height of the content which in some steps of my widget gives a big white space at the bottom which dont look very good.
Note all the interactions inside the widget iframe are done completely with ajax. (The iframe src is just one html page).
Take a look at this :) Also you could use postMessage - there is a crossbrowser jQuery plugin.
Hand-coding the postMessage stuff yourself is a walk in the park. You don't need a framework to do it for you. Here is an easy example on stackoverflow: cross-domain iframe resizer?