Results 1 to 7 of 7

Thread: Include a dynamically created object

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,371
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default Include a dynamically created object

    Including an external HTML-document into a file is best done on the server side (with the help of a language like PHP).
    If you want/have to do the inclusion on the client side, there are several options:
    (i) Ajax;
    (ii) the well-known hidden iframe-trick = extracting external content from a hidden iframe (the iframe itself will remain invisible); this is 'Ajax-like';
    (iii) modern DOM-techniques for dynamically changing parts of the (main) document (no use of Ajax or an iframe);
    (iv) including a text/html-object that contains the external content;

    My guess is that with the latter method (note: no use of the deprecated iframe), we can do virtually everything we can do with the other techniques (and it's simple!, see the script below), the only exceptions being (a) including navigation menus (since the position of menu-items on the screen should be free: their position shouldn't be restricted by the size (right-border etc.) of the object containig the menu); (b) including parts of external files.

    An enormous advantage of (iv) over (iii), which would seem the obvious way to 'do it', is that with (iv) there's no need for explicitly importing or defining the external css and js used for the external file.

    Script:
    Code:
    function create_external(the_id,url,object_style)
    {
    var inserted=document.getElementById(the_id);
    if(/*@cc_on!@*/false)
    {//We have to use innerHTML for IE if we want to do this with a text/html-object
    inserted.innerHTML='<object type="text/html" data="' + url + '", style="'+ object_style +'"><\/object>'
    }
    else //We could use innerHTML for non-IE too, but most coders will prefer the standard method
    while (inserted.firstChild)
    {
    inserted.removeChild(inserted.firstChild);
    }
    OBJ = document.createElement("object");
    OBJ.setAttribute('type','text/html');
    OBJ.setAttribute('data',url);
    OBJ.setAttribute('style',object_style);
    inserted.appendChild(OBJ);
    }
    Usage (values for styles only serve as an illustration):
    onclick="create_external('some_id','some_file', 'position:relative; width:190px; height:250px; background-color:yellow; left:0px; border:1px solid red;margin-top:9px'); return false; "

    Here's an example.
    ===
    Arie Molendijk
    Last edited by molendijk; 08-24-2008 at 01:23 PM. Reason: Correction

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    This is actually really cool. I never thought of use <object> as an include. Is this cross-browser?
    - Mike

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,371
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    Quote Originally Posted by mburt View Post
    This is actually really cool. I never thought of use <object> as an include. Is this cross-browser?
    I think it is cross-browser, with the exception of Netscape 7.0.
    ===
    Arie.

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    I wonder why:
    Code:
    var obj = document.createElement("object");
    obj.type = "text/html";
    obj.data = url;
    document.body.appendChild(obj);
    Won't work in IE?

    IE can handle regular attribute assignment... I don't see why it won't work
    - Mike

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,371
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    Quote Originally Posted by mburt View Post
    I wonder why:
    Code:
    var obj = document.createElement("object");
    obj.type = "text/html";
    obj.data = url;
    document.body.appendChild(obj);
    Won't work in IE?

    IE can handle regular attribute assignment... I don't see why it won't work
    That's exactly the question I posted in another thread. Apparently, IE doesn't handle the text/html-object right (yet). I guess we'll have to wait for that until IE8.
    ===
    Arie.

  6. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Typical IE.
    - Mike

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,371
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    Quote Originally Posted by mburt View Post
    Typical IE.
    Curse the day IE was created.
    ===
    Arie.

Bookmarks

Posting Permissions

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