Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Loading external content together with (external) scripts

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

    Default Loading external content together with (external) scripts

    1) CODE TITLE: Loading external content together with (external) scripts

    2) AUTHOR NAME: Arie Molendijk

    3) DESCRIPTION:
    We can use Ajax to dynamically update our page without page-reload. Unfortunately, Ajax does not bring in (by itself) the scripts belonging to the external content we want to include. I propose a script that does exactly that.

    4) URL TO CODE:
    http://www.let.rug.nl/molendyk/inclu...r_with_scripts

    EDIT:
    I modified the script for easier usage. New URL TO CODE:
    http://www.let.rug.nl/molendyk/inclu...r_with_scripts
    All we have to do now is putting this in the head of the main page:

    Code:
    <script type="text/javascript">
    var str = '';
    
    /*Creating an (invisible) iframe for importing external content and a div for importing external scripts. The script as a whole won't work in IE7 if we do it the standard DOM way. So I use document.write*/
    document.write('<iframe style="position:absolute; left: -10000px; width: 30px; height: 30px; display: none" name="ifr"><\/iframe>')
    document.write('<div id="script_container"><\/div>')
    
    
    /* Specifying the url of the external page that we want to put in the iframe and, subsequently, extract from the iframe */
    function get_url(url)
    {
    frames['ifr'].location.replace(url)
    }
    
    /* Representing the source of the iframe (used to extract external content) as a string */
    function create_string()
    {
    str=frames['ifr'].document.documentElement.innerHTML
    }
    
    /* Inserting the string into a div of our choice, and interpreting the code that may be contained in the string. */
    function include(content,div)
    {
    document.getElementById(div).innerHTML=content;
    
    var html_doc = window.frames.ifr.document;
    var js = html_doc.createElement('script');
    js.type="text/javascript";
    js.text='function bring_code_to_main(){var el = document.getElementsByTagName("script");var search_limit = el.length-1;for(var x=0; x < search_limit; x++){newScript = top.document.createElement("script");newScript.type = "text/javascript";if(el[x].src != "") {newScript.src=el[x].src;newScript.text=""} else {newScript.text = el[x].text;}top.document.getElementById("script_container").innerHTML="";top.document.getElementById("script_container").appendChild(newScript);}};setTimeout("bring_code_to_main()",0)'; html_doc.getElementsByTagName('body').item(0).appendChild(js);
    
    }
    
    /* Making it work*/
    function iframe_include(url,div)
    {where=div
    get_url(url);setTimeout("create_string();include(str,where)",200)
    }
    
    </script>
    Usage:
    Code:
    <a href="javascript: void(0)" onclick="iframe_include('external.html','some_div')">include external.html</a>
    (Of course, there should be a div having id='some_div' on the page!).
    Last edited by molendijk; 05-22-2011 at 11:00 PM. Reason: Modifying script

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

    Default

    I noticed that the (modified) script even works if we want to include menus having complicated js and css, provided we put the css of the external file in the head of the main document. There should be a way to do this automatically, but I don't know yet how to achieve that.
    So what I said in the demo, under 'Including whole menus', turns out to be too pessimistic. I'll change the info in the demo as soon I can use a decent computer. (The place where I am now is rather primitive from a technical point of view).
    ===
    Arie.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,005
    Thanks
    44
    Thanked 3,203 Times in 3,165 Posts
    Blog Entries
    12

    Default

    Does this work repeatedly? Like could you keep switching the content with various and/or the same script with the same and/or different content, essentially importing multiple times without there being some collisions? What about default content - content that's already in the div on page load? What happens to that if you want to get it back later after replacing it and have no external page for it?

    Anyways, I'm finding I have to click on the link twice or three times to get it to work. That's in Firefox, Chrome and IE the first time I view the page or if I clear the cache between attempts. In Opera - always.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    Does this work repeatedly? Like could you keep switching the content with various and/or the same script with the same and/or different content, essentially importing multiple times without there being some collisions?
    Yes, it's supposed to work repeatedly, with the same or different content.
    Quote Originally Posted by jscheuer1 View Post
    What about default content - content that's already in the div on page load? What happens to that if you want to get it back later after replacing it and have no external page for it?
    There should not be static default content. Dynamically inserted default content can be imported via 'onload'.
    Quote Originally Posted by jscheuer1 View Post
    Anyways, I'm finding I have to click on the link twice or three times to get it to work. That's in Firefox, Chrome and IE the first time I view the page or if I clear the cache between attempts. In Opera - always.
    That's strange. It worked here with all the major modern browsers (and even with IE6). I cannot check it now, because I don't have access to a decent browser right now. Did you (1) try the 'second' script and (2) put the css of the files_to_be_included in the head of the main page?
    Could you try this:
    Code:
    <!-- Valid doctype here -->
    <html>
    
    <head>
    <link rel="stylesheet" type="text/css" href="flexdropdown.css" />
    
    <link rel="stylesheet" type="text/css" href="anylinkcssmenu.css" />
    
    <script type="text/javascript">
    var str = '';
    
    /*Creating an (invisible) iframe for importing external content and a div for importing external scripts. The script as a whole won't work in IE7 if we do it the standard DOM way. So I use document.write*/
    document.write('<iframe style="position:absolute; left: -10000px; width: 30px; height: 30px; display: none" name="ifr"><\/iframe>')
    document.write('<div id="script_container" style="display:inline"><\/div>')
    
    /* Specifying the url of the external page that we want to put in the iframe and, subsequently, extract from the iframe */
    function get_url(url)
    {
    frames['ifr'].location.replace(url)
    }
    
    /* Representing the source of the iframe (used to extract external content) as a string */
    function create_string()
    {
    str=frames['ifr'].document.documentElement.innerHTML;
    
    }
    
    /* Inserting the string into a div of our choice, and interpreting the code that may be contained in the string. */
    function include(content,div)
    {
    document.getElementById(div).innerHTML=content;
    
    var html_doc = window.frames.ifr.document;
    var js = html_doc.createElement('script');
    js.type="text/javascript";
    js.text='function bring_code_to_main(){var el = document.getElementsByTagName("script");var search_limit = el.length-1;for(var x=0; x < search_limit; x++){newScript = top.document.createElement("script");newScript.type = "text/javascript";if(el[x].src != "") {newScript.src=el[x].src;newScript.text=""} else {newScript.text = el[x].text;}top.document.getElementById("script_container").innerHTML="";top.document.getElementById("script_container").appendChild(newScript);}};setTimeout("bring_code_to_main()",0)'; html_doc.getElementsByTagName('body').item(0).appendChild(js);
    
    }
    
    /* Making it work*/
    function iframe_include(url,div)
    {where=div
    get_url(url);setTimeout("create_string();include(str,where)",200)
    
    }
    
    </script>
    
    </head>
    
    <body >
    
    <a href="javascript: void(0)" onclick="iframe_include('flexmenu.html','some_div');">include flex</a><br>
    <a href="javascript: void(0)" onclick="iframe_include('anylinkmenu.html','some_div');">include anylink</a><br>
    <div id="some_div"></div>
    It works with me, provided we have a standalone anylink menu and a standalone flex menu.
    ===
    Arie.

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

    Default

    John, if it still refuses to work with you, does it work with a timeout, like:
    <a href="javascript: void(0)" onclick="setTimeout('iframe_include(\'flexmenu.html\',\'some_div\')',0)">include flex</a><br>
    <a href="javascript: void(0)" onclick="setTimeout('iframe_include(\'anylinkmenu.html\',\'some_div\')',0)">include anylink</a><br><div id="some_div"></div>
    ?
    Arie.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,005
    Thanks
    44
    Thanked 3,203 Times in 3,165 Posts
    Blog Entries
    12

    Default

    I was using your live demo page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default

    Your findings are in accordance with my own observations in so far as they relate to the first demo (first script).
    But the script here (second version) should work.
    ===
    Arie

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,005
    Thanks
    44
    Thanked 3,203 Times in 3,165 Posts
    Blog Entries
    12

    Default

    Nope.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    There should not be static default content. Dynamically inserted default content can be imported via 'onload'.
    My personal opinion is that Javascript should never be used unless there is default content. There should be something there if Javascript doesn't work, or if the other page doesn't load for some reason. Is it possible then to have a fallback? Maybe you're just saying you can't revert to the default (static) content after loading something else. That would be ok.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    Nope.
    But here it works. Strange! As soon as I'm home again (Sunday), I'll examine everything in detail.
    Quote Originally Posted by djr33 View Post
    Maybe you're just saying you can't revert to the default (static) content after loading something else. That would be ok.
    Yes, that's what I'm saying.
    ---
    DJR, doesn't this work with you either?
    Thanks,
    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
  •