iframe that does NOT call external html file

jamjammo · 07-09-2003, 03:04 AM

hello all.

im in search of a iframe-javascript that would NOT call an external page, but instead, show embedded HTML content from the same page.

<< hhmm, how else to make this clearer? >>

in other words, instead of using this:

Code:

<iframe src="external.htm" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>

i do not want to call an external file.
instead, i want the iframe to load content into the page that that it's in FROM the page it's in:

Code:

<< i know this is not proper format but im just getting the idea across >>

<iframe src="this is the content that would be loaded<br>and it can even be <u>underlined</u> stuff like <b>HTML</b>" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>

i hope im making some sense?
ive been to dynamicdrive, javascriptkit and javascriptsource, and neither have what i am looking for.
i HAVE seen it before, but can not remember where and ive used google to find, but to no avail.

i even looked here on these forums.

Kor · 07-09-2003, 10:06 AM

As far as I know, SRC atribute embed always an external element, a HTML page, an image, a CSS or JS file...

If you want insert text in a space similar with an iframe (I suppose you want to have scroll bars, this might be your single reason for seeking something like that) use some CSS styles attached to a dividing tag such as DIV

something like

<div style="overflow:auto">
<table>
<tr>
<td>text here blah blah <b> including any html tag you want</b>
</td>
</tr>
<table>
</div>

you may not use table, if u don't wanna.

the CSS atribute overflow controls the scroll of the object, and the auto value make the scroll possible if the text is longer that the height if the object.

See also some CSS tutorials

Mr J · 07-09-2003, 08:11 PM

The following will write to the Iframe and duplicate the contents of a div in the parent page.

<HTML>
<HEAD>
<TITLE>Main Page</TITLE>

<script language="javascript">

</script>

</HEAD>
<BODY onload="write_frame()">
<h1>Main Page</h1>

<iframe name="frame1" src="" width="300" height="200"></iframe>
<div id="test_div">This is some original text</div>
</BODY>
</HTML>

It might be simpler to use a layer in the parent page as "Kor" suggests

shlagish · 07-10-2003, 07:44 AM

Mr J, would that script "validate"?
If it wouldn't, could it? How?

BTW, that's pretty impressive, I didn't think something like that would be possible.

Jerome · 07-10-2003, 12:16 PM

Hi,

This will work for You:

function writeHTMLinYourIframe()

{
var d=document.name_of_iframe.document;
d.open();
d.write('<html><head></head><body>PUT HERE EVERYTHING YOU WISH DIV'S TABLES ETC</body></html>');
d.close();
}

You can ofcourse also make a string, which is the complete page including javascripts styles etc and write it like mentioned above....

Good luck,
Jerome

Mr J · 07-10-2003, 03:40 PM

Slagish.

I am probably showing my ignorance here but what would you want it to validate

jamjammo · 07-10-2003, 06:26 PM

the method that KOR suggested is a neat idea, but not really what im looking for. im sure ill use that for something else though.

Code:

<div style="overflow:auto">
<table>
<tr>
<td>text here blah blah <b> including any html tag you want</b>
</td>
</tr>
<table>
</div>

MrJ has it closer to what i really need. i dont know much about javascript, but im trying to make it so i can have 2 seperate iframes.

Code:

<HTML>
<HEAD>
<TITLE>Main Page</TITLE>

<script language="javascript">
<!--
function write_frame(){
mess=document.getElementById("test_div").innerHTML

document.frames["frame1"].document.write("<HTML>")
document.frames["frame1"].document.write("<HEAD>")
document.frames["frame1"].document.write("<TITLE>Document Title</TITLE>")
document.frames["frame1"].document.write("</HEAD>")
document.frames["frame1"].document.write("<BODY>")
document.frames["frame1"].document.write("<div id='test_div2'>HI</div>")
document.frames["frame1"].document.write("</BODY>")
document.frames["frame1"].document.write("</HTML>")

document.frames["frame1"].document.getElementById("test_div2").innerHTML=mess
document.frames["frame1"].document.getElementById("test_div2").style.color="#0000FF"
}
// -->
</script>

</HEAD>
<BODY onload="write_frame()">
<h1>Main Page</h1>

<iframe name="frame1" src="" width="300" height="200"></iframe>
<div id="test_div">This is some original text</div>
</BODY>
</HTML>

exactly (more or less) what im trying to do is to create several iframes with their own HTML content.
cause i have over 200 static HTML pages, and i dont want the site to get too large, otherwise my navigation gets tooo messy.

most of the pages are under 100K and think its a waste to make a whole new page just for some content, so id like to make them pages little iframes, using MrJs above code.

but im having trouble making it so that i can have more than 1 iframe with different content.

i dont remember exactly where, but i recall seeing a script that uses an iframe with text-links above it, and clicking the text-link loads the new content in the iframe window.
anyone know what that one is and where i can find it?

Mr J · 07-10-2003, 07:11 PM

Using Javascript to write to all the Iframes will in fact use more coding than if you load a page directly into the Iframe so your site could still end up bigger.

In the zip file I have posted there are example files on loading seperate files into Iframes.

See how much code is needed to write to 2 Iframes

<HTML>
<HEAD>
<TITLE>Main Page</TITLE>

<script language="javascript">

</script>

</HEAD>
<BODY onload="write_frame()">
<h1>Main Page</h1>
<div id="test_div">This is some original text</div>
<iframe name="frame1" src="" width="200" height="200"></iframe>

<iframe name="frame2" src="" width="200" height="200"></iframe>
<div id="test_div2">This is some more original text</div>

</BODY>
</HTML>

Mr J · 07-10-2003, 07:12 PM

Oops forgot the zip

jamjammo · 07-10-2003, 07:46 PM

THANK YOU SOO MUCH...
i can get this to work wonderfully.

Quote:

Originally posted by Mr J
Oops forgot the zip

i never was concerned really with ROBOTS searchng my pages, but what line of code should i insert into the framed pages to keep them from showing in search engines thus making my navigation useless?

ya nah mean?

kansel · 07-10-2003, 08:53 PM

Just a comment on the size of the js used to write the frame. Whenever I output html markup with js I use a little helper function to shorten what needs to be written.

Code:

function _tag(tagname,attributes){
/* tagname string: valid html/xhtml non-empty tag.
 * attributes string: (optional) valid attributes for specified tag. multiple attributes separated by spaces
 * returns String object surrounded by specified tag with optional attributes */
	var begin = "<" + tagname + (attributes?(" " + attributes):"") + ">";
	var end = "</" + tagname + ">";
	return begin + this + end;
}
String.prototype.tag = _tag;

which turns this

Code:

document.write("<table width=\"100%\" border=\"0\">");
document.write("<tr>");
document.write("<td>");
document.write("table content here");
document.write("</td>");
document.write("</tr>");
document.write("</table>");

into this

Code:

document.write("table content here".tag("td").tag("tr").tag("table","width=\"100%\" border=\"0\"));

my usage is a bit awkward but I've gotten used to it. at the very least I don't have to worry about closing all the html elements that i've opened.