I used Jquery to insert a variable to div. Please check my code.
var msg = '<script src="https://gist.github.com/3010234.js?file=new.html.erb"></script>'
$('.result').html(msg);
msg variable contains a script that render a code snippet. msg is dynamic variable.
The above code is not working to insert code snippet to div.
Any Idea?
This script generate code snippet like this.
To add script, I would add it to head like this;
var s = document.createElement('script');
s.src = 'https://gist.github.com/3010234.js?file=new.html.erb';
s.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(s);
You cannot load a github gist into a page dynamically using that embed code. The embed code is fine if you can add the script tag to the HTML, but to do it dynamically via JavaScript as you are trying to do, it won't work because it relies on document.write().
Instead, use the github gists api:
$.get("https://api.github.com/gists/3010234", function(response) {
$(".result").text(response.data.files["new.html.erb"].content);
}, "jsonp");
Working demo: http://jsfiddle.net/naTqe/
function loadScript() {
var script = document.createElement("script");
script.src = "https://gist.github.com/3010234.js?file=new.html.erb";
script.type = "text/javascript";
document.getElementById("result").appendChild(script);
}
It looks like your remote JS is buggy. I ran it through JS Lint and came up with several errors.
Anyway, here is my working example. Keep a javascript console open and you'll see the error when it tries to parse the remote JS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Jquery test</title>
</head>
<body>
<h1>jQuery</h1>
<p class="result">Some result</p>
<script>
/*<![CDATA[*/
$(document).ready(function(){
var msg = '<script type="text/javascript" src="http://gist.github.com/3010234.js?file=new.html.erb"><\/script>";
$('.result').html(msg);
});
/*]]>*/
</script>
</body>
</html>
Related
I'm currently learning javascript without any frameworks. How do you guys redirect to another html file, then assign a script to it dynamically?
So far, what I have done is:
onClick()
{
window.location = newpage.html;
var script = createElement('script');
script.src = dynamic + 'script.js';
var body = document.findbyID('body');
body.appendChild(src);
}
One of the examples of the dynamic script goes like this:
function addText()
{
var text = createElement('p');
text.innerhtml = sometext;
var textHolder = findbyid('div_somewhere_in_html');
body.appendChild(text);
}
The above code doesn't show the text inside the new webpage. The window.location command works. But after dynamically adding a text, it will not show up inside the new webpage. If I would console.log(window.location), it would only show my localhost:3000.
EDIT:
All files are hosted locally.
Since you own the target page, you can load (instead of pushing) a script based on a query string parameter. For example:
newpage.html
<!DOCTYPE html>
<html>
<body>
<script>
const dynamic = new URL(location).searchParams.get('script-prefix');
const script = document.createElement('script');
script.src = dynamic + 'script.js';
document.body.appendChild(script);
</script>
</body>
</html>
anotherpage.html
When clicking the following link, newpage.html will load and execute a script called MyPrefixscript.js.
<html>
<body>
My Link
</body>
</html>
BTW, I used an anchor, but window.location = '/newpage.html?script-prefix=MyPrefix' would work as well.
I am using following code inside my HTML to load a JS file after page load.(DOMContentLoaded)
<script>
document.addEventListener('DOMContentLoaded', function() {
var script = document.createElement('script');
script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
document.getElementsByTagName('body')[0].appendChild(script);
});
</script>
But I have several scripts to load and I have no idea how to do this in the best possible way. For example, I have following files to link.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
Any help would be greatly appreciated.
If you know upfront the script names you can define an array like:
var scripts = ["script1.js", "anotherscript.js", "whatever.js"];
And then loop through it, and for each script you can append it as you did before
var scriptName;
for (scriptName in scripts) {
// create the script and set the src = scriptName as before
}
I have a script which I want to load only for a certain country in blogger, how can I do that?
I tried doing something like
<script>
if (url contains .com) {
<script src=""></script>
}
</script>
but it's not working because nesting of the script is failing, the first </script> tag closes the outer <script> as well.
Like this,
<script>
if (url.indexOf(".com") > -1) {
var script = document.createElement('script');
script.src = "you/script/url";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
I've been trying to load a file using the following code, in a file I've called InterpolatorTest.js:
include("scripts/ProceduralContentGeneration/NoiseGeneration/Interpolation/Interpolator.js");
var interpolator = new OneDimensionalInterpolatorTemplate();
This is the include code, which is loaded in the header of every page:
function include(scriptName) {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = scriptName;
document.getElementsByTagName("head")[0].appendChild(script);
}
And this is the script I'm trying to include, Interpolator.js:
OneDimensionalInterpolatorTemplate = function() {
}
However, when I try to load the script, I get the following error:
Uncaught ReferenceError: OneDimensionalInterpolatorTemplate is not defined --- InterpolatorTest.js:3
It doesn't seem to be able to access the methods in the loaded script, but it doesn't give me a 404 error so I assume it's loading the script successfully. I've used this include script before with success.
This is the actual code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Page Title</title>
<script type="text/javascript" src="scripts/EssentialUtilities.js"></script>
</head>
<body>
<script type="text/javascript" src="scripts/ProceduralContentGeneration/NoiseGeneration/Interpolation/InterpolatorTest.js"></script>
</body>
</html>
I've been working on this for hours and I'm totally stumped. Anyone know what's wrong?
Edit: Thanks to the answer from Alberto Zaccagni, I got it working by installing jQuery and using this code snippet. The issue seems to be that Javascript loads files asynchronously, so I was attempting to call the method before it was loaded. AJAX has a synchronous loading method, so that eliminated the problem. :)
I think that what you're missing is the onload bit, have a look at this question: How do I include a JavaScript file in another JavaScript file?
I include the relevant snippet as reference:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
I've got a javascript file being added dynamically to a page. If I use document.write, it works fine:
<html>
<head></head>
<body>
<script type="text/javascript">
var src = 'myDynamicScript.js';
document.write('<scr' + 'ipt type="text/javascript" src="' + src + '"></scr' + 'ipt>');
</script>
</body>
</html>
However, if I use appendChild, as outlined in this answer, the script gets downloaded, but never runs:
<html>
<head></head>
<body>
<script type="text/javascript">
var src = 'myDynamicScript.js';
var script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
document.body.appendChild(script);
</script>
</body>
</html>
I've got a simple example set-up here (write) and here (append). Should I expect it to run, or is that the known behavior? If it should, why isn't it?
Your script is running all right, you just can't document.write from it. Use an alert or something to test it and avoid using document.write altogether.
Your examples work for me in Safari. Here are some questions:
What browsers are you testing? (Guessing you're having trouble on IE.)
Are you trying this from a server and not just dragging index.html into your browser?
What else is running on the page that might be blocking myDynamicServer.js?
Has something hijacked window.onload?
Have you tried appending myDynamicServer.js to document.getElementsByTagName('BODY')[0] and not document.body?