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 6 of 6
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    need a suggestion regarding loading external data into an iframe

    Hi,

    Here be the scenario: I have a page that I want to be able to load external .htm files into a specified area onto this site. These pages will all be on the same domain to avoid security concerns.

    My initial approach was to use a div toggler but the community organization who I'm making this page for won't have the technical knowledge required to edit the text if it it all housed in divs on the same page. They wish to have separate .htm files for each 'page', but they don't want to refresh the entire page every time a link is clicked -- i figure this means that I need to use an iframe, but please suggest other ideas if they are simpler.

    For some reason, and I am still trying to figure out why, I can't position the iframe properly. I think what's messing me up is that some of the display properties are housed in the iframe tag itself, and others I have in my css file. Can someone please have a look at this and try to position it properly or at least direct me to the appropriate area?

    Alternatively if there is a simpler / cleaner way to do this please suggest it.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Testing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    
    <script type="text/javascript">
    
    /***********************************************
    * IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of original DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
    //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
    var iframeids=["contentarea"]
    
    //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
    var iframehide="yes"
    
    var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
    var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
    
    function resizeCaller() {
    var dyniframe=new Array()
    for (i=0; i<iframeids.length; i++){
    if (document.getElementById)
    resizeIframe(iframeids[i])
    //reveal iframe for lower end browsers? (see var above):
    if ((document.all || document.getElementById) && iframehide=="no"){
    var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
    tempobj.style.display="block"
    }
    }
    }
    
    function resizeIframe(frameid){
    var currentfr=document.getElementById(frameid)
    if (currentfr && !window.opera){
    currentfr.style.display="block"
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
    currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
    else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
    currentfr.height = currentfr.Document.body.scrollHeight;
    if (currentfr.addEventListener)
    currentfr.addEventListener("load", readjustIframe, false)
    else if (currentfr.attachEvent){
    currentfr.detachEvent("onload", readjustIframe) // Bug fix line
    currentfr.attachEvent("onload", readjustIframe)
    }
    }
    }
    
    function readjustIframe(loadevt) {
    var crossevt=(window.event)? event : loadevt
    var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
    if (iframeroot)
    resizeIframe(iframeroot.id);
    }
    
    function loadintoIframe(iframeid, url){
    if (document.getElementById)
    document.getElementById(iframeid).src=url
    }
    
    if (window.addEventListener)
    window.addEventListener("load", resizeCaller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", resizeCaller)
    else
    window.onload=resizeCaller
    
    </script>
    
    </head>
    
    <body>
    <div id="pageContainer">
    	<div id="topBorder"><img src="images/head&hands_color.gif"></div>
    	<iframe id="contentarea"  scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:500px; display:none"></iframe>
    	<div id="links_BW">
    		<a href="javascript:loadintoIframe('contentarea', 'test.htm')"><img src="images/logoButtons/info_BW.jpg" id="info_BW"></a>
    		<img src="images/logoButtons/YPP_BW.jpg" id="YPP_BW">
    		<img src="images/logoButtons/social_BW.jpg" id="social_BW">
    		<img src="images/logoButtons/med_BW.jpg" id="med_BW">
    		<img src="images/logoButtons/legal_BW.jpg" id="legal_BW">
    		<img src="images/logoButtons/J2K_BW.jpg" id="J2K_BW">
    	<img src="images/logoButtons/street_BW.jpg" id="street_BW">	</div>
    	
    
    
    </div>
    
    </body>
    </html>
    Code:
    /* CSS Document */
    * {
    padding: 0;
    margin: 0;
    outline: 0;
    }
    html, body {
    height:100%;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    }
    * html #pageContainer {
    height:100%;
    }
    * img {
    border: 0 
    }
    #pageContainer {
    min-height: 100%;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    #topBorder {
    position: relative;
    display: block;
    margin-top:75px;
    margin-left: 75px;
    }
    #links_BW {
    float: left;
    position: absolute;
    display: block;
    margin-left: 75px;
    margin-top: 25px;
    width: 70px;
    }
    #contentarea {
    z-index: -1;
    clear: right;
    float: left;
    position: relative;
    margin-left: 150px;
    margin-top: 25px;
    border: 1px solid black
    }
    /*#info_BW, YPP_BW, social_BW, med_BW, legal_BW, J2K_BW, street_BW {
    padding-bottom: 15px
    } --- I may want to do this later but for now it is doing it on it's own...*/
    i put it up here for viewing purposes: www.enviromark.ca/head/
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The iframe isn't in the link you post. Since you float your navigation to the left, your iframe needs to come after the navigation. As to the page not refreshing, I guess you could use ajax but if the user has JS disabled then they will be stuck with a page refresh. http://www.dynamicdrive.com/dynamici...jaxcontent.htm
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i got some results by adding this, but the iframe still wont display beside the black and white images

    Code:
    	<iframe id="contentarea"  scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:500px; display:none"></iframe>
    	<div class="clear"></div>
    	<div id="links_BW">
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hi Aero, I think i posted my last comment right after you did

    Thank you for that link, i had tried it before without success, but I gave it another shot and managed to make it work

    There is just one odd little thing occurring... The stylesheet I am using for the main page is affecting the text attributes of the .htm file being loaded into the div. I wish to prevent this because i will be creating a standardized css file for all of the .htm files to be loaded, and I don't want to have to worry about changes I make to the main.css file affecting the pages loaded in the div.

    How would I go about preventing this?

    index.htm
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Testing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    
    <script type="text/javascript">
    
    /***********************************************
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""
    
    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }
    
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
    
    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }
    
    /*
    	<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
    	<div id="logoC"></div>
    	<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
    */
    </script>
    
    </head>
    
    <body>
    <div id="pageContainer">
    	<div id="topBorder"><img src="images/head&hands_color.gif"></div>
    	<div id="links_BW">
    		<a href="javascript:ajaxpage('test.htm', 'contentarea');"><img src="images/logoButtons/info_BW.jpg" id="info_BW"></a>
    		<img src="images/logoButtons/YPP_BW.jpg" id="YPP_BW">
    		<img src="images/logoButtons/social_BW.jpg" id="social_BW">
    		<img src="images/logoButtons/med_BW.jpg" id="med_BW">
    		<img src="images/logoButtons/legal_BW.jpg" id="legal_BW">
    		<img src="images/logoButtons/J2K_BW.jpg" id="J2K_BW">
    		<img src="images/logoButtons/street_BW.jpg" id="street_BW">
    	</div>
    	<div class="clear"></div>
    	<div id="contentarea"></div>
    </div>
    </body>
    </html>
    test.htm
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    <div align="center">
      <p><font size="+5">test test test</font><br>
        <br>
        <br>
        <img src="file:///E|/sites/FV%20Jones/images/globe.gif">
    </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>heyeheye  </p>
    </div>
    </body>
    </html>
    main.css
    Code:
    /* CSS Document */
    * {
    padding: 0;
    margin: 0;
    outline: 0;
    }
    html, body {
    height:100%;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    }
    * html #pageContainer {
    height:100%;
    }
    * img {
    border: 0 
    }
    #pageContainer {
    min-height: 100%;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    #topBorder {
    position: relative;
    display: block;
    margin-top:75px;
    margin-left: 75px;
    }
    #links_BW {
    float: left;
    position: absolute;
    display: block;
    margin-left: 75px;
    margin-top: 25px;
    width: 70px;
    }
    #contentarea {
    position: relative;
    margin-left: 155px;
    margin-top: 27px;
    margin-right: 150px;
    border: 1px solid black;
    }
    /*#info_BW, YPP_BW, social_BW, med_BW, legal_BW, J2K_BW, street_BW {
    padding-bottom: 15px
    } --- I may want to do this later but for now it is doing it on it's own...*/

    oh, lastly, what does this mean?
    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)

    (as per usual the link is up and is www.enviromark.ca/head/
    Last edited by canadianjameson; 07-06-2007 at 08:31 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just look at the other ajax scripts from dynamic drive. That last line tells the browser whether or not to use a cached page.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks Aero, everything seems to be working spectacularly
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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