CODEWITHSUNDEEP
javascripthtmlajax
Josh Ribakoff
Josh Ribakoff

Reputation: 3048

Including html+javascript with javascript

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.

Upvotes: 0

Views: 97

Answers (2)

cocco
cocco

Reputation: 16706

for security reasons you should not use eval...

use 

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

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

Upvotes: 1

clem
clem

Reputation: 3366

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

Upvotes: 2

Related Questions