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>
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
}
Using Google Optimize I want to run an A/B test which includes loading an external script for one of the variants. In order to do this, I need to be able to add my script before the closing <body> tag, preferably.
<script type="text/javascript" src="https://example.com.js" async></script>
</body>
If I select the body tag using the visual editor, I do not have the option to Edit HTML. You can Insert HTML, but if I try to append the script tag, Google tells me I have to remove it.
Is there a way to do this?
you might try adding following snippet instead of inserting the script directly in HTML block:
<script>
var script = document.createElement('script');
script.onload = function () {
//do stuff with the script
};
script.src = "https://example.com.js";
document.body.appendChild(script);
<\script>
I am loading external javascript on my site through:
<script language="javascript" type="text/javascript">
document.write("<script src='http://remoteserver/banner.php?id=10&type=image&num=3&width=200'><\/script>");
</script>
Everything was fine, but today was a big timeout from the remote server and page loading on site was blocking.
Is there possibility to load javascript asynchronous or to load it after page loads?
I don't want page load interruption while remote server not working.
I know there are tag async in HTML5, but it's not working, i think because this script is more complex than javascript (its ending with ".php").
Also i know it's better to put javascript files before /body tag to prevent this problem, but it's not the best solution.
Do you know other solutions?
Sync script blocks the parser...
Incorrect Method:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
Async script will not block the rendering of your page:
Correct method:
<script type="text/javascript">
(function(){
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
Source: http://www.youtube.com/watch?feature=player_detailpage&v=Il4swGfTOSM&t=1607
You can easily do it by creating DOM nodes.
<script>
var scriptEl = document.createElement("script"); //Create a new "script" element.
scriptEl.src = "http://remoteserver/banner.php?id=10&type=image&num=3&width=200";
// ^ Set the source to whatever is needed.
document.body.appendChild(scriptEl);
// Append the script element at the bottom of the body.
</script>
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>