|
User #24354 2058 posts
Whirlpool Forums Addict
|
We wish to display a partners content within an iframe on our site, with:
1) The content page being hosted on a different domain
2) The iFrame adjusting in height to fit the height of the page displayed within (dynamic content, so height is not predictable)
3) The iFrame to adjust as users navigate the pages within the iFrame
I would prefer a solution where we do not have to add code to the paged being displayed within the iFrame, but if there is no other choice then we may be able to get them to add the required code.
Does anyone know of a solution? (even if it is using an alternative to an iFrame).
I have come across many solutions, however I believe they all require the page to be hosted on the same domain as the iFrame. This looked promising: www.dynamicdrive.com/dyn...7/iframessi2.htm
Many many many thanks for any help!
|
posted 2008-Apr-24, 1am AEST
edited 2008-Apr-24, 2am AEST
|
|
|
|
User #58287 4443 posts
Whirlpool Forums Addict
|
iframes are so ugly.
Use something like PHP Curl or if its your own site PHP include. :)
|
posted 2008-Apr-24, 3am AEST
edited 2008-Apr-24, 3am AEST
|
|
User #65448 493 posts
Forum Regular
|
a quick solution would be using CSS (height:100%) but as above poster said, iFrames are ugly and a bad idea, best option (if possible) would be getting the content in XML format and parsing them on your page the way you want, you can also get external web page content, remove unwanted parts and include the parts you want with some server side coding, at least with PHP you can do it by using file_get_content function
Edit: there is no a quick and easy solution but to use a language like PHP
|
posted 2008-Apr-24, 7am AEST
edited 2008-Apr-25, 2am AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
Hiro nakamura writes... Does anyone know of a solution? (even if it is using an alternative to an iFrame).
Yes, in another thread just the other day (I'll find it and re-post) Foonly pointed out that a div has an overflow property that provides a more elegant option.
It provides for auto scrolling and resizing with changing content, as well all the other good things you can do with divs.
And of course you can fill a div with content from another site, not directly via the src property because it does not have one, but there are many examples of how to do it.
|
posted 2008-Apr-24, 8am AEST
edited 2008-Apr-24, 8am AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
Sorry, been called away. Here is some code to play with:
<div id=stuff style="align=center; width:800; height:400; overflow:scroll">
<iframe width=780px height=2000px frameborder=0 scrolling=no src="http://forums.whirlpool.net.au"> </iframe>
</div>
You can maniplute the div properties via JS and CSS to suit.
Edit: back again ---------
The code snippet above shows a fixed div that scrolls because overflow: is set to scroll, but that was just to illustrate the point that the div has now become the element that limits the actual display area of the iframe within it.
Setting fixed width/height of the iframe controls the maximum expansion of the div in any particular direction.
If there was content wrapped around the div it would (hopefully*) be easier to use CSS to control the behaviour of the div in respect to that content than operating directly on the iframe.
* I've not played with iframes for a while and do not know their current CSS limitations.
|
posted 2008-Apr-24, 9am AEST
edited 2008-Apr-24, 12pm AEST
|
|
User #24354 2058 posts
Whirlpool Forums Addict
|
@ SnipSnap!: I have no idea what PHP curl is. I will look it up before suggesting to the developers.
@ Winstone: We will eventually integrate with the provider via XML, but are looking for a quick and easy solution in the meantime.
@Perite: Cheers, I tested the code, but my understanding of iFrames/Divs/HTML/CSS is really limited.
What would be awesome is if someone could supply code (using iframes or divs etc) allowing us to embed any desired site within ours (in between out header/footer etc) with this section expanding/retracting to display the contents of the page within. This way I can see it working before passing it on to the developers.
The other thing is though, we need to ensure that our CSS does not effect the way the other page is displayed within the iFrame/div.
I know its not much, but I am happy to give $100 to the person who can supply a working solution.
Thanks again.
|
posted 2008-Apr-24, 4pm AEST
|
|
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
Just to save anyone else from bothering with this approach - it fails because you cannot read the 'protected variable' (scrollHeight) of another site.
Back to the divs for another try!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-885 9-1">
<title>Fun</title>
<script language="javascript">
function resizeFrame(){
var realHeight = document.getElementById("ourFrame" ).document.body.scrollHeight;
document.getElementById("ourFrame" ).style.height = realHeight + 10 + 'px';
}
</script>
</head>
<body onload="resizeFrame()">
<br/><br/></p>
<br/><br/>content above</p>
<br/><br/></p>
<iframe id="ourFrame" src="http://forums.whirlpool.net.a u" frameborder="0" scrolling="no" height="100px" width="780px"></iframe>
<br/><br/></p>
<br/><br/>content below</p>
<p\></p>
</body>
</html>
|
posted 2008-Apr-24, 5pm AEST
edited 2008-Apr-24, 5pm AEST
|
|
User #24354 2058 posts
Whirlpool Forums Addict
|
Perite writes... Just to save anyone else from bothering with this approach - it fails because you cannot read the 'protected variable' (scrollHeight) of another site.
bugga :(
Back to the divs for another try!
There must be some way to have the div auto adjust to the height of the page being displayed, even if some code needs to be placed on the pages being shown within the div/iframe. Well at least I hope there is some way.
|
posted 2008-Apr-24, 5pm AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
What about this?
|
posted 2008-Apr-24, 6pm AEST
|
|
User #24354 2058 posts
Whirlpool Forums Addict
|
looks awesome, but in Firefox and IE (the only two browsers I have to test with), it does not expand and just chops off the content below a fixed height.
|
posted 2008-Apr-24, 6pm AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
Oh. I did it in Opera where it is clean as a whistle. Also fine in Safari FWIW. I don't have IE or FF on my machine...
As you can see it uses a simple frameset and that should work 'universally' with fewer problems than an iframe even!
The central content scrolls using the mousewheel; changing the scrolling attribute of the central frame should provide a normal scrollbar which came and went as required.
Maybe someone else on this thread can comment on resolving any frame problems in the other browsers.
|
posted 2008-Apr-24, 6pm AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
Hiro nakamura writes... it does not expand and just chops off the content below a fixed height
I fired up the windows box and checked it out in IE (v6 of all things) and FF and it seems to work beautifully!
When you say "it" does not expand, I think you are referring to the window itself.
If the external content is greater than the window height then it has to be clipped. The alternative - to resize the window vertically downward below the screen - would hide the window controls!
As mentioned above, that problem is solved by arranging scrollbars so as to access the content if the content extends below the bottom of the window.
Here's how it looks.
PS. BSB 633000 AC 115736035 : )
|
posted 2008-Apr-24, 8pm AEST
|
|
User #24354 2058 posts
Whirlpool Forums Addict
|
Cheers for trying to help mate, it is much appreciated.
Unfortunately making the iFrame expand to suit the browser window is not the problem, what we want is for
2) The (whatever)to adjust in height to fit the height of the page displayed within (dynamic content, so height is not predictable)
So that we do not have a scroll bad for the iframe and so that the user can not even tell that a frame is being used.
An example is on this page: www.dynamicdrive.com/dyn...7/iframessi2.htm, however this solution only works if the page being shown with the iFrame is on the same server/domain.
The reason an iFrame/Div would be preferable to a standard Frame also is because we do not want the top/bottom content to stay on the screen, but to disappear as the user scrolls down.
|
posted 2008-Apr-24, 9pm AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
Hiro nakamura writes... Cheers for trying to help mate, it is much appreciated.
My heart is set on the money.
2) The (whatever)to adjust in height to fit the height of the page displayed within (dynamic content, so height is not predictable)
Mine does exactly that!
So that we do not have a scroll bad for the iframe and so that the user can not even tell that a frame is being used.
Mine does exactly that! It only displays a scroll bar if the content is bigger than your page; it then removes the scroll bar if the content gets smaller.
An example is on this page: www.dynamicdrive.com/dyn...7/iframessi2.htm, however this solution only works if the page being shown with the iFrame is on the same server/domain.
Problem a) As you acknowledge security changes in browsers prevent old solutions from working and that is not likely to change. So you cannot manipulate objects on other domains. It also means that it is impossible to programatically grab the HTML and put it into a div, though some older browsers may permit it.
Problem b) dynamicdrive say this: eliminating any possible IFRAME scrollbars from appearing while snugly showing the entire external content. That is impossible if the content is larger than the space available - it either has to be clipped or it has to be scrolled. My solution handles that problem perfectly.
The reason an iFrame/Div would be preferable to a standard Frame also is because we do not want the top/bottom content to stay on the screen, but to disappear as the user scrolls down.
Mmm. You also said this allowing us to embed any desired site within ours (in between out header/footer etc).
So if you want headers and footers then my solution provides them. If you don't want headers and/or footers you can remove the top and/or bottom frames - but if you did both - there would be nothing left of your site for the user to navigate with! You would be in effect redirecting him to the other site...
Without being mean about it check out what you have said and what you are asking for. : )
|
posted 2008-Apr-24, 10pm AEST
edited 2008-Apr-24, 10pm AEST
|
|
User #24354 2058 posts
Whirlpool Forums Addict
|
unfortunately it does not do what I am asking for. I am sure others will be able to see this also. Seriously, if this was the solution then I would be overjoyed to part with $100. Unfortunately it is looking more and more like there is no solution which really sucks.
We want to have a single scroll bar for the entire page (not just the frame/iframe) with the iframe expanding to fit the content shown within. As such the user will scroll up and down the entire page as they would with any normal page, not within a 2nd frame which makes it obvious to the user that something aint right.
I am confident that I expressed this in my 3 requirements in my OP?
|
posted 2008-Apr-24, 10pm AEST
|
|
User #24354 2058 posts
Whirlpool Forums Addict
|
Perite writes... Mine does exactly that!
2) The iFrame adjusting in height to fit the height of the page displayed within (dynamic content, so height is not predictable)
Perhaps the "within" was missed? Not fit the height of the browser, but the page displayed within , as in expand to fit the google results, not chop them off or show a slide bar, but rather expand in height.
___
Why you may ask? Well our header (which is actually a header, tabs and then a search section) takes up a considerable amount of space, as does the footer, so we can not have people scrolling within an iframe of say 200pixels in height :p.
The reason for using an iframe/div also is that is needs to sit in the center of the page with a width of 800pixels otherwise it will expand over the area where we have a different color background.
|
posted 2008-Apr-24, 10pm AEST
edited 2008-Apr-24, 10pm AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
I do understand your frustration and share it. You can probably tell already!
No security work around seems likely, so I've personally given up the 'take some HTML from another domain' and insert it in your site and make it amenable to normal formatting techniques approach.
Because I've done no programming for the last five years I was initally confident that there was a div solution because I'd played with it before, but I can see no light at the end of that tunnel now.
Since the last post I thought that a nested frameset would solve all the problems: so that one outside frame contained the expanding inner pages and showed scrollbars when the inner frameset expanded, but it does not work (for me, tonight anyway!).
Without that it seems the "expanding downwards" problem can only easily be resolved by removing the footer, or leaving it there and scrolling the content in between it and the header, and keeping the header stationary during the scroll.
Setting the width to your 800px is no problem, the only problems are 'vertical' - hope!
Can you whim me with your site URl so I'm not in the dark as much.
Problem solving is fun so 'never say die' but it's good to be prepared to compromise .. or die?
|
posted 2008-Apr-24, 10pm AEST
edited 2008-Apr-24, 11pm AEST
|
|
User #24354 2058 posts
Whirlpool Forums Addict
|
Perite writes... Problem solving is fun so 'never say die' but it's good to be prepared to compromise .. or die?
Well the developers have already created a solution using an iFrame with a scroll bar when the content within exceeds the height of the iFrame. I was hoping to supply them with code to get rid of the scroll bar (even if we had to ask our partners to insert some code within the pages we show in the iFrame). Unless we can do this, there is no reason to change from what we have now (until we implement an XML solution or give them an iFrame to place on their site (fixed height) for our header etc, and direct users to their servers.
|
posted 2008-Apr-25, 4am AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
BTW there is also the issue that if you have no control over the content of the pages (of your partners?) loading in the iframe or any frame they can jump out of them into a new window.
If they just contain static content then it's less likely to happen accidentally, but sometimes people don't want their content used in other's frames and do this.
I'll be away today in town but will be interested to see tonight if others have made any progess!
|
posted 2008-Apr-25, 8am AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
Just had another thought - thinking about you using the word 'partners' because there may be a solution using signed scripts.
If it wasn't for the security barrier my earlier iframe resizer technique would work, as well as other more elegant approaches such as loading the other domain content into a hidden iframe, then grabbing it's innerHTML and using that to populate a simple div on your own page.
All of those things you can do on your own domain...
|
posted 2008-Apr-25, 8am AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
(I wonder what the record number of consecutive posts for an individual is.)
Looks like it's the thing people want to do. And someone did it.
Update:
To check the security lockout I carefully script-walked every readable property/node/child/etc of an 'off domain' iframe and none of the critical properties can be 'read' let alone written to. At least the direct manipulation option looks like it's not, so time to think of something else.
|
posted 2008-Apr-25, 8pm AEST
edited 2008-Apr-25, 8pm AEST
|
|
User #203975 1350 posts
Whirlpool Enthusiast
|
Summary -- only IMHO of course!
What can be done:
It is easy for your page to resize its iframe even if the src document is on another domain and the resize does everything you want! But without knowing what the other domain's page size is, you can't do it.
Edit: And there are some interesting ways to try to pass that info from the remote page to yours. Eg. an onload function in the remote page can work out what it's own scrollHeight is then try to pass that back to the calling page by adding search args to it's own URL, eg this pseudo-code:
// the remote page URL initially has no 'size' search arg, so add one
function resizeMe(){
var pageHeight = getSearchArg("size");
if(pageHeight == ""){
this.location = this.location + "?size=" + this.document.body.height;
}
}
The above code does work, if not for the 'if' statement the remote page reloads continuously. But at the end of the day your document can't access that changed value it can only access the 'src' which does not get updated with the new args. Grrrr.
What can't be done:
Browser cross-domain security is designed to prevent getting any information about the page on the other domain, eg. it's size. No script/CSS on your domain can get or set any property or change any characteristic of your iframe if the src of that iframe is a document on another domain. If an exploit exists (using divs, full framesets or iframes or whatever) then it would be killed sooner or later.
Partner sites can't modify their pages to co-operate with you to resize the iframe because while their page knows the right size, their domain can't change the iframe size on your domain. Security is reciprocal. The same thing applies to divs and everything else.
Exceptions:
Signed scripts.
A hack involving DNS cross referencing.
There is another solution in co-operation with partners:
Instead of just loading their page into your iframe by a GET (ie. via a link/menu) your site could POST to a page on their server. The POST args (invisible fields) would contain your <header html> and your <footer html> and the URL of the requested page. (Or you could send your whole body HTML in a single hidden field with a comment string in the middle that they searched for and replaced with their content.)
Their server would take that data and construct a new page from your html with their content embedded in the middle and return a new complete page to you that would be displayed the way you wanted. That equates to a redirect unless you did it from a page in a frameset which should not be a problem.
hth, cheers,
Phil
|
posted 2008-Apr-25, 11pm AEST
edited 2008-Apr-26, 10am AEST
|