0

I am trying to include the source of a webpage within another. The embedded webpage has its own doctype, head and body declarations, and could have separate styles.

The trick here is that I wish to avoid an iframe, since I have the source available on the server-side, but not as an HTML page (I retrieve it from database).

I guess one way would be to create a page that would render it and then show it inside an iframe, but I aim at having one single page, though I did not find a way. Does anybody have a better suggestion?

I use jQuery in my application, so if I missed a solution there, this would be an option too.

Bharadwaj
  • 2,535
  • 1
  • 22
  • 35
Chop
  • 4,267
  • 5
  • 26
  • 58
  • Please post your code in www.jsfiddle.net or www.codepen.io or update your question with the code you tried so far. – Sulthan Allaudeen Apr 01 '14 at 09:52
  • 1
    Why have a separate page ? Just dynamically populate a div ? – JayD Apr 01 '14 at 09:56
  • @SulthanAllaudeen : I did not try anything yet, I am looking for the way to do it. But if you want the main idea, here it is:http://jsfiddle.net/xgsq4/ – Chop Apr 01 '14 at 09:58
  • @user2515563 : see the jsfiddle: populating a div is... just _wrong_. Plus, styles come conflicting. I need something more evolved. – Chop Apr 01 '14 at 09:58

4 Answers4

1

If your server supports php, you can retrieve the page code from database with php and then echo it

Cypho
  • 103
  • 1
  • 15
  • This would produce something like the jsfiddle I produced for another user: http://jsfiddle.net/xgsq4/ Styles conflict, and I cannot think of an tag somewhere inside the tag as being clean. – Chop Apr 01 '14 at 10:00
  • you can fetch the code in an array, and then strip the start and the end of the code so and tags would be gone – Cypho Apr 01 '14 at 10:02
1

You shall use this one.

<html>
<head>
something here 
</head
<body>

<?php
require ('page1.html');
?>

Here is your fiddle

Sulthan Allaudeen
  • 11,330
  • 12
  • 48
  • 63
0

There was a similar post asking "How to load an external website into a div of a html page"

Although i dont fully understand your situation. If you just want a dynamic page with no reloads, populating a div or other element from a data source would be much more efficient.

Heres another link on embedding webpages... http://www.web-source.net/embedding_web_pages.htm

But like is said I dont understand your end goal fully, so maybe you should reword your question.

Good Luck

Community
  • 1
  • 1
JayD
  • 6,173
  • 4
  • 20
  • 24
0

Reviewing my past questions and ignorance, I have the beginning of an answer for people who may be facing a similar situation:

Using jQuery's .load() allows you to load a page or a portion of it and insert it into the current DOM.

$('#my-target-element').('/the/page/to/load.html')

This function strips the <head> and <body> tags but all their contents is preserved (including the <head>'s <meta> and <link>.

If you wish to load only a part of the remote page into the current one, you can use a jQuery selector, as in the example below:

$('#my-target-ol').('/the/page/to/load.html #my-included-list li')
Chop
  • 4,267
  • 5
  • 26
  • 58