Load external page

Howto show external link on one page

[socken]

I want an external page to load in my page, without leaving my page! I know it's possible with frames or iframes, but that's not what I want! Is there any other way to achieve this? CSS only supports the layout, but can I load an external page into a div?

Thanks for any suggestions!

[kaled]

1) You can use server-side includes (SSI).
2) You can use an invisible IFrame to load the data and then use javascript to copy iframe.document.body.innerHTML to div.innerHTML
3) You can use AJAX (that js + http requests) but I have no knowledge of this technology.

Server-side includes are probably the simplest solution and will work if javascript is disabled.

Kaled.

[MichaelBluejay]

I don't understand what you're asking. If your page is replaced by the page you're loading, how is that not leaving your page? Do you want just the URL to remain the same? If you don't want your page to be entirely replaced, where do you want the new page content to appear? At the very bottom of your existing page?

[socken]

Thanks for your answers.

On the left side, I have a list of links. On the right side is my content. When I click on a link, I want the external page to load in the content area.

So, I don't leave my page, the links on the left side always stay where they are!

@kaled:
The second suggestion also looks quite interesting! I'll have a look at it! Thanks..

If you have any other suggestions: SHOOT! ;-)

[kaled]

If you want your content to be accessible to search engines and to be bookmarkable you may need to think again. Search engines may find your content pages but they'll be indexed in isolation and so users will jump straight to them not your intended page.

You should consider reversing the problem, i.e. how to include the navigation area in the content pages rather than how to dynamically change the content according navigation requests. There are good reasons why everyone else does it this way.

Kaled.

[socken]

OK, thanks for the suggestion.

Can you be a bit more specific?
The thing about the search engine is a good thought.

I want a navigation on my left side, content on the right. But I also want two headers on top, which contain ads, according to the page in the content.
How should I plan my site then?

[kaled]

Do you require the navigation and advert areas to be fixed (non-scrolling)? If yes, how large (in pixels) is each likely to be?

If these areas can scroll, then standard methods can be used, otherwise things get very tricky.

Precisely what approach is right for you will depend on what authoring software you are using (templates might be a good approach) how big the site is, what hosting limitations there are (e.g. is php available) and whether you need to burn the site onto CD (ruling out SSI and php unless you add further software to the CD).

Kaled.

[socken]

The navigation and adverts need to be fixed. The navigation can get veeery long.

I have to mention, that the page is not for me! I'm doing it for somebody.

I'm using 'no' authoring software. Well, I use VI as editor. I'm doing the design with CSS.
PHP should be available,yes! I don't need to burn it on CD.

I already got it to work with IFRAMES. It's not a very good solution though. I'm using a javascript, which sets the height of the iframe every time something is loaded into it. The design looks very nice with the iframe. The only problem is, the javascript only seems to be working with IE, not in Firefox.

Mhh..I really have to search a good tutorial on this issue...

[socken]

Isn't there a method to load an external page into a div? I've seen a ajax-script. Unfortunately, this only works for sites from the same domain. Is there a similar script that works with all external links?

[MichaelBluejay]

Soken, I suggest you abandon the idea of trying to load a page within a page. Any method you can figure to do that will give you the same problem you have with frames -- that it will be impossible for users to bookmark or search engines to identify a specific page of content.

Here's some code that will give you a non-scrolling area at the top:

<html><head> 
<style type="text/css"> 
 body { overflow: hidden } 
 div.content { height: 100%; overflow: auto } </style></head> 
<body> 
  
<table width=100% bgcolor=khaki><tr><td>Fixed menu</td></tr></table> 
  
<div class=content> 
 <table width=100% height=2000 bgcolor=lightyellow> 
 <tr><td valign=top>content</td></tr> 
 </table> 
</div> 
  
</body></html>

[socken]

Hi, thanks for you reply. I know, if it was for me, I wouldn't do it that way! But it's for someone else, and this person wants it like this..

Mhh.. I really have to figure that out somehow.

Thanks for you help anyway!

[tacfit]

Hi Socken,

Go here: [dynamicdrive.com...] That should do it for you, using AJAX.

<admin note: I made a new question here into a new thread [webmasterworld.com]>

[edited by: tedster at 9:41 pm (utc) on Mar. 2, 2006]