We need to add a script to our web application. It basically adds an corporate menu.
So we've received a script to include in the body of our web application:
<!-- BEGIN NAVIGATION -->
<script type="text/javascript" src="https://intranet.local/?getCorporateJsMenu"></script>
<!-- END NAVIGATION -->
And the content of https://intranet.local/?getCorporateJsMenu basically looks like this:
document.write('<script type="text/javascript" src="..."></script>');
//....
document.write('<div>');
document.write('<ul>');
//...
document.write('<li>...</li>');
//...
document.write('</ul>');
document.write('</div>');
After having placed the <!--NAVIGATION--><script... directly into the HTML body, we were experiencing severe page load performance problems.
So our idea was to add the menu with JavaScript, when everything has already been loaded with something like this:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://intranet.local/?getCorporateJsMenu';
var domparent = jQuery('#header').get();
domparent[0].appendChild(script);
With Firebug we see, that the script element has been added to the HTML content and the script has been loaded from the network, but somehow the document.write of the loaded script doesn't get executed. Why?
We cannot modify the contents of https://intranet.local/?getCorporateJsMenu since it comes from third party.
This happens because the script execution stops at the first found literal </script> tag, no matter if it was enclosed in the parenthesis. You need to obfuscate the ending script tag, for example:
document.write('<script type="text/javascript" src="..."><\/script>');
However, it seems you use also jQuery. Why not use the jQuery methods to load a script and add the content to a page rather than document.write()?
Here is an example of hijacking document.write() to bring 21st century loading performance to legacy scripts:
<script>
var writes = [];
document.write = [].push.bind(writes);
</script>
<div id=targ></div>
<script type="text/javascript" src="https://intranet.local/?getCorporateJsMenu"></script>
<script>
document.getElementById("targ").innerHTML = writes.join(" ");
</script>
I've used the patterns to support ads on a SPA site, as well as to cache embeds, and in one case to modify the content's style before injecting.
Try this:
document.write('<scr' + 'ipt type="text/javascript" src="..."></scr' + 'ipt>');
Related
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>
If I include this script tag in the header or the body of an HTML document, then the external script it points to will be executed:
<script type="text/javascript" src="http://www.example.com/script.js"></script>
If I add that same script tag to the page AFTER it has finished loading, either by using another script in the page or by running a javascript: URI, the external script will not load.
This is an HTML document that tries to do what I'm talking about:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function f () {
var s;
s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
document.body.appendChild(s);
alert(typeof $);
}
</script>
</head>
<body onload="f();">
</body>
</html>
If you open this document in a web browser, the JavaScript pop-up dialogue will say "undefined" instead of "object". If it said "object", then that would mean that the jQuery code had been loaded.
Another case would be a bookmarklet that requires JavaScript code that is not used by the page it is run on. For example, if a bookmarklet needs jQuery and the page that it is run on does not use jQuery, it might do this:
s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
document.body.appendChild(s);
The above code does not result in jQuery being loaded.
What can I do to load a script after an HTML page has loaded? I do not want to use any JavaScript libraries because that would require the library code to have already been loaded by the page.
Appending scripts with javascript loads them asynchronously. Add an onload handler to execute what code you want
<script type="text/javascript">
function f () {
var s;
s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
document.body.appendChild(s);
s.onload=function(){alert(typeof $)};
}
</script>
What can I do to load a script after an HTML page has loaded?
Put
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js">
after the closing of the body. An html page is rendered from top to bottom so only when the body has been loaded the browser will download the script (if not already in cache). In this way you can put another script after this to console log typedef if your really need it
I have a script (Google Maps, to be exact) that is loading dynamically, and for a couple of reasons, I cannot alter how this initially loads by default.
Through JavaScript, I would like to find the string libraries=places and change it to libraries=places,visualization after the fact
So, the originally output:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places">
</script>
Would be:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization">
</script>
Is this even possible?
Thanks In Advance
this solution should apply to yours as well:
How do I include a JavaScript file in another JavaScript file?
script.src = url; will be the line where you add the src url however you like
First of all Give the google map script tag an ID:
<script id="google_map_script" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Then do:
var google_map_script = document.getElementById("google_map_script")
google_map_script.setAttribute("src", "https://maps.googleapis.com/maps/api/js?libraries=places,visualization")
Edit: since apparently this isn't what is needed then what about this:
var script = document.createElement('script');
my_awesome_script.setAttribute('src','https://maps.googleapis.com/maps/api/js?libraries=places,visualization');
document.head.appendChild(script);
Also have a look into using postscribe.
So when I want to put a Google +1 button on webpages, I would do this:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'zh-TW'}
</script>
But I am wondering, there is an object in the script tag, but it is also loading plusone.js! At the end the script can also get the object inside the tag. How does Google do that? Unlike normally I would not put anything inside. Normally I would do
<script type"text/javascript" src="script.js"></script>
Since the URL is known, it's simple enough:
JSON.parse(
document.querySelector("script[src='https://apis.google.com/js/plusone.js']")
.innerHTML.replace(/^\s+|\s+$/g,'')
);
That said, as Alohci pointed out in the comments, the last script on the page will be the last one loaded when the script runs, because (unless specified otherwise) scripts are blocking. Therefore, this would work:
var scripts = document.getElementsByTagName('script');
var data = JSON.parse(scripts[scripts.length-1].innerHTML.replace(/^\s+|\s+$/g,''));
I have some javascript which will create some sort of widget on a page. I will be giving this snippet to clients so I want them to have to do very little.
The most obvious solution which I have work right now looks something like this:
<div id="divContent"></div>
<script type="text/javascript">
MakeWidget('divContent');
</script>
Make widget basically looks for the divContent div and fill it with my widget's html.
Is there a better way to do this?
Can you replace a Script Tag with a Div using Javascript in that Script Tag?
I would really like it if I could reduce the code down to only the MakeWidget function and it would replace itself and the script tag with the html the function generates.
Edit - I essentially want to generate HTML exactly where the MakeWidget function is called on the page.
Can you replace a Script Tag with a Div using Javascript in that Script Tag?
Yes. When the <script> element is reached, assuming it is not a defer or async script, it will be the last script element in the page so far. So you can say, either inline or in an external script:
<script type="text/javascript">
(function() {
var scripts= document.getElementsByTagName('script');
var script= scripts[scripts.length-1];
var div= document.createElement('div');
div.innerHTML= 'Whatever content is going to be inserted';
script.parentNode.insertBefore(div, script);
})();
</script>
You have to have MakeWidget defined somewhere, right? Presumably this is going to be in an external script. Why not just have the external script source just attach itself to the divContent using the window.onload method?
This would result in this code on your client's page:
<script src="http://foo.com/makewidget.js"></script>
Your makewidget.js code could then look like this:
window.onload = function() { MakeWidget('divContent') }
There may some issues with other scripts loading and probably some cross-browser compatibility issues but that should get you pointed in the right direction.
So you want to have a script element which replaces itself with div.
Your initial code is like this:
<div id="divContent"></div>
<script>
MakeWidget('divContent');
</script>
You can rewrite it like this (I am using JQuery):
<script id="scriptContent">
$('#scriptContent').after('<div id="divContent"></div>');
MakeWidget('divContent');
$('#scriptContent').remove();
</script>
I have not tried it though!
I would think it would be possible to do it as follows:
<div id="divWidgets">
<script type="text/javascript">
MakeWidgets("divWidgets");
</script>
</div>
The end result should be (if I understand your description correctly) that MakeWidgets will replace the contents of the DIV, which, in this case, is the script itself.