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
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Embedding websites and iframes... :sigh:

    Hello all. I'm a fairly experienced coder, but pure HTML and stylistic concerns were never really an issue for me to focus my attention on. The current site (www.PiratesOnly.com) I am working on has run into an issue. I needed to force the persistence of a menu bar across the top of the screen, as we are implementing the use of Movable Type blogs and, eventually, personal webpages and subdomains.

    I first considered using PHP to just include the menu and footer on each page, but that quickly became untenable. There are infinite amounts of comment pages generated from an active user's update of their blog. To combat this, I decided to embed an iframe in the center of the page, much to my dismay. Frames would have worked too, but I desire the appearance that each page is standalone and is just preceded by a menu and followed by a footer.

    In order to establish this appearance, I need to have the iframe auto-resize in order to not have a scroll-bar, the scroll-bar then appearing on the browser. However, when you navigate links inside of the iframe, the iframe will not auto-update it's size. Here is the code I am using to update iframe height:

    Code:
    /***********************************************
    * 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=["myframe"]
    
    //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)
    }
    }
    
    
    //Retrieve background color and set it as current
    document.body.style.background=document.getElementById("myframe").contentDocument.body.bgColor;
    
    
    
    }
    
    function readjustIframe(loadevt) {
    
    
    //Retrieve background color and set it as current
    document.body.style.background=document.getElementById("myframe").contentDocument.body.bgColor;
    
    
    
    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
    
    function openLoginWindow()
    {
        window.open("../sites/login.php", "_blank", 
            "height=340px width=240px");
    }
    Now my question here is two-fold. First, I would like to know how to update the size of my iframe when you navigate links inside of it. The caveat to this, however, is that I cannot edit the websites that I will be navigating in the iframe. Is there a jscript listener, perhaps, that I can install on the iframe from the parent?

    Thanks for any help you can offer!

  • #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
    If the urls in the iframe are external then you can't resize the iframe for security reasons sorry.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well, they are my personal webpages, they are just infinite (comment pages automatically created on journal entry). And if I load an external page using a link on the main page, it automatically resizes...

    Perhaps there's a better way to do this?

  • #4
    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
    Okay just looked at your site. Your urls are on your own server. That script should be working just fine. At least it seems to on the dynamicdrive site. I also clicked on a few links within the iframe and the iframe resized just fine. I guess I'm not seeing the issue.

    Okay what seems to be happening is the main url is http://www.piratesonly.com however the links inside of the iframe are http://piratesonly.com without the www. This is enough to cause the script to error out.
    Last edited by _Aerospace_Eng_; 02-26-2008 at 05:25 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Ksamim (02-26-2008)

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Would I have to change the way the links function inside the website, such as the blogs, or could I get the jscript to take that into account?

  • #6
    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
    I would make all of the links have the www or leave it off. You can use htaccess for this. What type of server are you on?

    Jscript and javascript are different things don't confuse them. I wouldn't rely on the JS to check the urls. I would make them all uniform using htaccess like I said. We need to know if you can use htaccess first however.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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