Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    iframe that does NOT call external html file

    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.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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">
    <!--
    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>




    It might be simpler to use a layer in the parent page as "Kor" suggests
    Last edited by Mr J; 07-09-2003 at 08:14 PM.

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Shawn

  • #5
    Regular Coder
    Join Date
    Oct 2002
    Posts
    299
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Slagish.

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

  • #7
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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">
    <!--
    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_div'>HI</div>")
    document.frames["frame1"].document.write("</BODY>")
    document.frames["frame1"].document.write("</HTML>")

    document.frames["frame1"].document.getElementById("test_div").innerHTML=mess
    document.frames["frame1"].document.getElementById("test_div").style.color="#0000FF"


    mess2=document.getElementById("test_div2").innerHTML

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

    document.frames["frame2"].document.getElementById("test_div2").innerHTML=mess2
    document.frames["frame2"].document.getElementById("test_div2").style.color="#FF0000"

    }
    // -->
    </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>


  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Oops forgot the zip

    Attached Files Attached Files

  • #10
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    THANK YOU SOO MUCH...
    i can get this to work wonderfully.

    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?

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •