Including html+javascript with javascript

Question

I'm working off these two existing links, trying to combine the strategies listed here.

How do I include a JavaScript file in another JavaScript file?

Execute my jQuery script after dynamically inserted jQuery library has finished loading

I've boiled my issue down to a simple script that demonstrates the issue I'm having. I have these two files:

test2.html:

<script type="text/javascript">alert('test');</script>
foreign html;

test1.html:

<script type="text/javascript" language="javascript">
var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", "test2.html", true);
    xmlhttp.send();
</script>
<div id="myDiv">my div</div>

So obviously test1.html is supposed to make an ajax call out to test2.html, and write it's HTML into the div. When I run test1.html, it does this - the div shows "foreign html" which is coming from test2.html - however it doesn't execute the alert box. Visiting test2.html directly does display the alert box.

So in other words, I need to grab the contents of a remote webpage, and insert it into a div, AND have it's javascript executed. The "real" test2.html will use jquery, so test1.html cannot use it otherwise I'm loading jquery twice.

==================================================

Based on the comments warning me about XSS & suggesting I change my architecture, I'm editing this to elaborate. The goal of this project is a "piece" of html my users can paste on their sites, this pulls in a bunch of functionality. The functionality they are pulling in involves loading jquery plugins, and HTML. Yes, my users would have to trust me to not XSS attack them. Just like you trust Google not to XSS you when you use Google Analytics. My post isn't asking for security advice. I just want to make this simple "hello world" type example work. The real application is secure.

When I used jquery in test1.html, it did cause the JS in test2.html to be executed, but this is just a contrived example which is overly simplified compared to my real app. The real app uses heavy jquery in test2.html - and I need to be able to update test2.html on my server, without giving my users new versions of test1.html. Having test1.html load it's own version of jquery is a lot overhead, just to include test2.html.

Your comment is a bit unwarranted. My post specifically states this is an example constructed specifically to replicate an issue. You know nothing about the app I'm building. — Josh Ribakoff, Nov 03 '13 at 19:56
Yeah, that's true. It's just a warning for you and everyone else that might read this question. — , Nov 03 '13 at 20:05
Right on, good point - anyone reading this question should know that test1.html is exposing it's cookies, etc.. to whoever controls test2.html - that's a business decision though. Companies often trust other companies in this way, such as people trusting Google when they include Analytics on their page, or people trusting the jquery CDNs, etc. — Josh Ribakoff, Nov 03 '13 at 20:16
One way for me to do this would be to use eval() as discussed in the links I put above, and Stratton's answer, it would however require me to turn all my HTML into a JS string, and inline all my external JS that test2.html includes. That may have to be the work around, unless there's a better way. — Josh Ribakoff, Nov 03 '13 at 20:20

clem · Answer 1 · 2013-11-03T20:07:53.393

2

if you really want to do this you can wrap your js into a div and then use eval() to execute javascript once you've loaded the content of test2.html
e.g.

eval(document.getElementById('script').innerHTML);

you should however consider changing the architecture of your application and use call back functions instead
i'd also recommend using a library like jquery since that simplifies ajax calls and call back functions a lot
another thing i noticed: you should wrap your javascript into an onload function. if you don't do that you might get a javascript error as you're trying to add content to a div that potentially doesn't exist at the moment you call the function

edited Nov 03 '13 at 20:07

answered Nov 03 '13 at 19:42

clem

3,345
1
22
33

I'm open to suggestions, but I've arrived at this approach based on specific design goals, like being able to make changes to the functionality my users are pulling into their site, without having to have them update code on their end. See my edited post above explaining further. It's very overkill to use jquery 2x. The included content uses jquery and needs to be able to upgrade jquery without the users updating their code. The lack of an onload function is specific to this contrived example, but thanks. – Josh Ribakoff Nov 03 '13 at 20:02

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

for security reasons you should not use eval...

use

(new Function(document.getElementById('script').innerHTML))()

https://stackoverflow.com/a/19711866/2450730

edited May 23 '17 at 11:57

Community

1
1

answered Nov 03 '13 at 20:46

cocco

16,442
7
62
77

Including html+javascript with javascript

2 Answers2