Embedding a div from one page in another page

by: ryancysPosted on 2008-11-23 at 22:07:16ID: 23026851

>>But is there anyway to embed just one div or table from a page into another page?

Most probably you can refer to the div or table in another page, and then regenerate it by copy its HTML code.

If you talking about embedding, it only allow you to embed an URL, but not object in a page.

by: quincydudePosted on 2008-11-23 at 22:12:02ID: 23026861

It's not really possible with html. But you can put the whole div into a javascript function and call that function to print out the div code. Something like

<html>
<head>
<script language="javascript">
function myDiv()
{
	document.write("<div>this is the content of my div</div>");
}
</script>
 
</head>
<body>
	something here.....
 
	<script language="javascript">
		myDiv();
	</script>
 
	something else...
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:

Select all Open in new window

by: picoallenPosted on 2008-11-23 at 22:42:27ID: 23026911

Thanks to you both,

I know I can get html out of the webpage that a javascript is in by using document.getElementById("theSourceElement").innerHTML

But how can I get it out of another page? Is there something possible like document("http://myotherwebsite.net/pagewiththecontentIwant.htm").getElementById("theSourceElement").innerHTML

by: dankangrPosted on 2008-11-24 at 07:23:53ID: 23028423

You can add the content of the page with the IFRAME as you do
A workaround is to pass on the source of the IFRAME an extra param like
Mypage.asp?CalledFromIframe=true
Inside your page you can check that param and if it is true then you can hide all the other content
You can do this also with HTML pages on the onload event or by adding the script on the bottom of the file of your HTML page and by requesting location.url to see if the attribute exists.

Another work around is to put the div in an page alone
and call it from both pages with the INCLUDE FILE attribute

This approach requires ASP files

by: ryancysPosted on 2008-11-24 at 17:40:54ID: 23031951

for frame, you can try:

window.frames['yourframe'].document.getElementById('yourframeobject').innerHTML

1:

Select all Open in new window

by: quincydudePosted on 2008-11-26 at 16:24:26ID: 23047027

If using frame then why need to embed it again? As if you use frames the content of the frame should be already included in the page. If you set the frame to so small as invisible and extract the content within then I think you are having too much time on your hands. :P

anyway, if follow ryancys code, you might have to use the follow code, where myarea is a div or something to hold your embedded content and yourframeobject is the target content.

window.frames['mymainframe'].document.getElementById('myarea').innerHTML
= window.frames['yourframe'].document.getElementById('yourframeobject').innerHTML;

1:
2:

Select all Open in new window

by: picoallenPosted on 2008-11-27 at 15:48:32ID: 23052691

Thanks everyone,

I've tried many variations without success. Try playing with the attached page code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="Content-Language" content="en">
	<script type="text/javascript">
	
		function extractAndDisplayWeather() {
		
			var theirweather = document.getElementById('theirweatherframe');
			var myweather = document.getElementById('myweatherframe');
			
			alert('The extractAndDisplayWeather function has been called');
 
			var weathercontent = window.frames[theirweather].document.getElementById('boxed_blue_nopad_struc').innerHTML;
			//var weathercontent = theirweather.document.getElementById('boxed_blue_nopad_struc').innerHTML;
			//var weathercontent = theirweather.getElementById('boxed_blue_nopad_struc').innerHTML;
			
			alert('Copied the theirweatherframe content'); // Doesn't get to here
			alert(weathercontent);
			
			//window.frames[myweather].document.getElementById('boxed_blue_nopad_struc').innerHTML = weathercontent;
			myweather.document.getElementById('boxed_blue_nopad_struc').innerHTML = weathercontent;
			//myweather.getElementById('boxed_blue_nopad_struc').innerHTML = weathercontent;
		}
		
   </script>
</head>
 
<body onload="extractAndDisplayWeather()">
 
   <iframe id="theirweatherframe" name="theirweatherframe" src="http://www.weatherzone.com.au" width="1010" height="400" frameborder="0">
   </iframe>
   
   <p>&nbsp;</p>
   
   <iframe id="myweatherframe" name="myweatherframe" width="1010" height="300" frameborder="1">
      <div id="boxed_blue_nopad_struc"></div>
   </iframe>
   
</body>
 
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:

Select all Open in new window

by: ryancysPosted on 2008-11-28 at 00:43:23ID: 23054337

I got a Access is Denied error, I believe we cannot refer to iframe's content that belongs to other domain... more like a security issue.

so perhaps you cannot put part of other domain's page into your own web page.

by: picoallenPosted on 2008-12-07 at 22:23:43ID: 23118915

Yes ryancys that's my conclusion. I tried it using another page within my site and it worked, but it fails with external pages.

by: picoallenPosted on 2008-12-07 at 22:26:21ID: 31519696

Thanks to you both. There wasn't a solution really, but now at least I know that.

by: ryancysPosted on 2008-12-07 at 22:26:40ID: 23118924

>>I tried it using another page within my site and it worked, but it fails with external pages.

Yes, that's what I mean by Access Denied, you can't access to other website's details that is using another domain.

by: picoallenPosted on 2008-12-07 at 22:41:59ID: 23118950

I guess it's a sensible restriction. Otherwise it would be very easy for someone dodgy to very easily create a phishing site based on someone else's site.

Question

Embedding a div from one page in another page

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Web Authoring

Hypertext Markup Language (HTML)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press