Loading Inline Javascript through an AJAX load through jQuery

Question

I have a similar problem to this question.

Loading Javascript through an AJAX load through jQuery?

I want to load an HTML page into a div container using Ajax and JQuery's .load() . The html page has javascript on it that loads a weather widget from http://www.showmyweather.com/

This is the script:

<script type="text/javascript" src="http://www.showmyweather.com/weather_widget.php?    int=0&type=js&country=ca&state=Ontario&city=Hamilton&smallicon=1&current=1&forecast=1&background_color=ffffff&color=000000&width=175&padding=10&border_width=1&border_color=000000&font_size=11&font_family=Verdana&showicons=1&measure=C&d=2013-11-11"></script>

I don't know how to include the widget in the DOM other than placing the script inline the html page. If there is a way to use this script and add it in using $.getscript(); that would be nice, but I can't figure it out.

Trident D'Gao · Accepted Answer · 2013-11-12T14:42:35.333

0

var element = document.createElement("iframe");
document.body.appendChild(element);
var frame = window.frames[windows.frames.length - 1];
frame.document.write('<scr' + 'ipt type="text/javascript" src="http://www.showmyweather.com/weather_widget.php?int=0&type=js&country=ca&state=Ontario&city=Hamilton&smallicon=1&current=1&forecast=1&background_color=ffffff&color=000000&width=175&padding=10&border_width=1&border_color=000000&font_size=11&font_family=Verdana&showicons=1&measure=C&d=2013-11-11"></sc'+ 'ript>');

edited Nov 12 '13 at 14:42

answered Nov 12 '13 at 05:25

Trident D'Gao

18,973
19
95
159

Thanks for the help. It indeed does work on this page, however on the page I'm loading the widget onto I also have a facebook like button. When I enter your script into the console I get this error: SecurityError: Blocked a frame with origin "http://www.mywebsiteurl.com" from accessing a frame with origin "http://static.ak.facebook.com". The frame being accessed set "document.domain" to "facebook.com", but the frame requesting access did not. Both must set "document.domain" to the same value to allow access. – GSimon Nov 12 '13 at 05:45
I downvoted because it won't work in ie or opera http://stackoverflow.com/questions/1736886/why-wont-this-javascript-using-document-open-and-document-write-work-in-inter – megawac Nov 12 '13 at 05:46
@GSimon, you have more than one iframe on your page try `var frame = window.frames[window.frames.length - 1];` instead `var frame = window.frames[0];` – Trident D'Gao Nov 12 '13 at 05:52
@megawac, there is no such thing as Opera anymore, get real, use Chrome – Trident D'Gao Nov 12 '13 at 05:53
Any reason for the space in included here btw?: – GSimon Nov 12 '13 at 05:58
try without it, if it sill works than I was too cautious, basically the reason is that you should not use `` literal within the script tag – Trident D'Gao Nov 12 '13 at 06:00

score 0 · Answer 2 · answered Nov 12 '13 at 05:59

This is the way it's done with mootools in Asset.javascript:

var loadScript = function (source, properties) {
    properties || (properties = {});
    var script = document.createElement('script');
    script.async = true;
    script.src = source;
    script.type = 'text/javascript';
    var doc = properties.document || document, load = properties.onload || properties.onLoad;
    return delete properties.onload, delete properties.onLoad, delete properties.document, 
    load && (script.addEventListener ? script.addEventListener("load", load) : script.attachEvent("readystatechange", function() {
        [ "loaded", "complete" ].indexOf(this.readyState) >= 0 && load.call(this);
    }))
    doc.getElementsByClassName("head")[0].appendChild(script);
}

Now you can call loadScript("script url", {document: window.frames[0].document}) and it will load the script in the window. Just need to pass it an external document in options and a script.

Loading Inline Javascript through an AJAX load through jQuery

2 Answers2