Including javascript into an html file is easy, but is it possible to go the other way? If I have a test.html file
<html>
<head>
<script>
function helloWorld() { console.log("Hello World!"); }
</script>
</head>
<body>
<h1 id="test">TEST</h1>
</body>
</html>
I want to be able to include this html in javascript so that I can reference all of the DOM elements and javascript of my html file, i.e.
require("test.html");
var header = document.getElementById("test");
helloWorld();
This code obviously does not work. But I'd really like to find a way to include an html file in javascript as if it were the document object. Is this possible?
I would do something like this.
https://codesandbox.io/s/happy-frog-pmidw?file=/src/index.js
const url = "test.html";
fetch(url)
.then((response) => response.text())
.then((text) => new DOMParser().parseFromString(text, "text/html"))
.then((dom) => dom.getElementById("test"))
.then((test) => {
console.log(test);
//Do something with test.
});
You can perform an AJAX call to test.html in your javascript code.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//xhttp.responseText will have all the HTML content
}
};
xhttp.open("GET", "test.html", true);
xhttp.send();
I don't have the context on why you want to do this but I don't recommend it. If you include your script into your HTML code, that script will be able to get any HTML node in that file.
Example:
<html>
<body>
<h1 id="test">TEST</h1>
</body>
<script>
//document.getElementById/getElementByClassName, etc will work with any node inside this file.
</script>
This is the same code from your question, except that the script is at the bottom and will work for you to get any elements.
With jQuery:
jQuery.get('https://example.caom/test.html', function(data) {
alert(data);
});
With vanilla js:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.caom/test.html');
xhr.onreadystatechange = function() {
xhr.responseText;
}
xhr.send();
When you include a tag in your html, the browser understands that to be instructions to make a GET request to whatever at src. Prior to the introduction of esm to browsers, Javascript didn't have anything like that. Require was added into nodejs pretty early on, but it still didn't work in browsers. A lot of projects have attempted to solve the same problem in browsers, with the most successful being bundlers like webpack. They resolve the file that is being required, then include it in the same file, or in more advanced cases, add a request to go get that file to the code.
As all the other answers have indicated, this is what you need to do to get html (or really any other files) into your javascript.
I am trying to pass a javascript variable to a php page via the URL. The code below triggers the php page but it doesn't get the variable. I have written the code using window.location.href and that works fine, the problem is doing it that way it loads the tracker.php page.
Below is my code.
<script type="text/javascript">
var siteId = "VT0013";
</script>
<script type="text/javascript" src="http://www.domainame.com/tracker.php?siteId="+ siteId ;>
</script>
PHP Page
$siteId = $_GET["siteId"];
Once I get the siteId I email the result as a test this works fine, except I am not getting the value of siteId. When using this same code with window.location.href it all works fine.
I'm guessing that since this is called tracker.php, you actually just need to hit this URL? If that's the case, consider using the Beacon API.
navigator.sendBeacon('https://example.com/tracker.php' {
siteId: 'VT0013'
});
This results in an HTTP POST request, but that's generally better for this anyway. You won't have to worry about caching. Also, the Beacon API will still work even if the request hasn't finished and the page is being unloaded.
If you actually do want to dynamically loads JavaScript instead, a current way to do that is to use import().
const siteId = 'VT0013';
await import (`https://example.com/tracker.php?siteId${encodeURIComponent(siteId)}`);
Finally, if you need to dynamically load this JavaScript and that script needs to run in the context of the rest of the page (i.e., not a module) then the best thing to do is inject a new script tag: https://stackoverflow.com/a/8578840/362536
No matter what you do, make sure you're escaping the data used in your URLs and in your HTML.
You can just do a quick XHR request if you want older browser support without polyfills:
var siteId = 'VT0013';
var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET', 'http://www.domainame.com/tracker.php?siteId=' + encodeURIComponent(siteId));
xhr.send();
This is just an alternate solution, #Brad's answer should be accepted.
You need to use document.write to write any HTML that contains JavaScript variables:
<script type="text/javascript">
var siteId = "VT0013";
document.write('<script type="text/javascript" src="http://www.domainame.com/tracker.php?siteId='+encodeURIComponent(siteId)+'">
<\/script>')
</script>
This is the equivalent of writing
<script type="text/javascript">
var siteId = "VT0013";
</script>
<script type="text/javascript" src="http://www.domainame.com/tracker.php?siteId=VT0013"></script>
Edited to properly escape JavaScript variable.
Please note that it is not advisable to use document.write to load scripts from a third-party domain because Google Chrome might choose not to load the script if the connection is too slow. See https://developers.google.com/web/updates/2016/08/removing-document-write.
If the script can be loaded asynchronously, I recommend this method instead because it will not slow down the HTML parser:
<script>
var siteId = "VT0013";
(function(d, s){
s = d.createElement("script");
s.src = "http://www.domainame.com/tracker.php?siteId="+encodeURIComponent(siteId);
d.getElementsByTagName("head")[0].appendChild(s);
})(document)
</script>
I started a blog recently and coded it by hand. It is a static, CSS/HTML5 website. Upon sharing it with friends, I realized that when I would update it via FTP, it would be cached already by their browsers. I decided that I would keep all of my blog posts on new pages and then create a landing page that would somehow determine the newest post and forward users there after they clicked an enter button or something like that.
I was able to create a button that could forward them to a specific link, but I want to create a script that will always forward them to the newest page. So I created a file called 'getLatest.json' and uploaded it to an 'api' subfolder of my site. I then tried to use an XMLHttpRequest to load it:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
window.location = "http://latestBlogPost.com" +
xhttp.responseText.today;
//Today is a parent in the object returned.
}
};
xhttp.open("POST", "http://myWebsite.com/api/getLatest.json", true);
xhttp.send();
}
But that didn't work. The response was a null string. I tried using jquery to no avail.
I tried uploading a file called getLatest.html which contained the url in plaintext. That didn't work either.
tl;dr: Is there some way that I can get plaintext from a URL's html content?
edit: getLatest.json and getLatest.html contain a link to the newest blog post.
There are couple of ways to do this.
First your code is not working because you are using a "POST" it should be "GET", if you do that it will work.
Second easiest way is to create a java script file with variable declared and reference that file to your website
<script type="text/javascript" src="http://your javascript file"> </script>
This file contains your variable like this
var latestBlog = "http://....";
in your code use this variable. No more code required. but as i mentioned earlier if you change your HTTP Verb to get your code will work
If I have a script tag like this:
<script
id = "myscript"
src = "http://www.example.com/script.js"
type = "text/javascript">
</script>
I would like to get the content of the "script.js" file. I'm thinking about something like document.getElementById("myscript").text but it doesn't work in this case.
tl;dr script tags are not subject to CORS and same-origin-policy and therefore javascript/DOM cannot offer access to the text content of the resource loaded via a <script> tag, or it would break same-origin-policy.
long version:
Most of the other answers (and the accepted answer) indicate correctly that the "correct" way to get the text content of a javascript file inserted via a <script> loaded into the page, is using an XMLHttpRequest to perform another seperate additional request for the resource indicated in the scripts src property, something which the short javascript code below will demonstrate. I however found that the other answers did not address the point why to get the javascript files text content, which is that allowing to access content of the file included via the <script src=[url]></script> would break the CORS policies, e.g. modern browsers prevent the XHR of resources that do not provide the Access-Control-Allow-Origin header, hence browsers do not allow any other way than those subject to CORS, to get the content.
With the following code (as mentioned in the other questions "use XHR/AJAX") it is possible to do another request for all not inline script tags in the document.
function printScriptTextContent(script)
{
var xhr = new XMLHttpRequest();
xhr.open("GET",script.src)
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log("the script text content is",xhr.responseText);
}
};
xhr.send();
}
Array.prototype.slice.call(document.querySelectorAll("script[src]")).forEach(printScriptTextContent);
and so I will not repeat that, but instead would like to add via this answer upon the aspect why itthat
Do you want to get the contents of the file http://www.example.com/script.js? If so, you could turn to AJAX methods to fetch its content, assuming it resides on the same server as the page itself.
Update: HTML Imports are now deprecated (alternatives).
---
I know it's a little late but some browsers support the tag LINK rel="import" property.
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
<link rel="import" href="/path/to/imports/stuff.html">
For the rest, ajax is still the preferred way.
I don't think the contents will be available via the DOM. You could get the value of the src attribute and use AJAX to request the file from the server.
yes, Ajax is the way to do it, as in accepted answer. If you get down to the details, there are many pitfalls. If you use jQuery.load(...), the wrong content type is assumed (html instead of application/javascript), which can mess things up by putting unwanted <br> into your (scriptNode).innerText, and things like that. Then, if you use jQuery.getScript(...), the downloaded script is immediately executed, which might not be what you want (might screw up the order in which you want to load the files, in case you have several of those.)
I found it best to use jQuery.ajax with dataType: "text"
I used this Ajax technique in a project with a frameset, where the frameset and/or several frames need the same JavaScript, in order to avoid having the server send that JavaScript multiple times.
Here is code, tested and working:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script id="scriptData">
var scriptData = [
{ name: "foo" , url: "path/to/foo" },
{ name: "bar" , url: "path/to/bar" }
];
</script>
<script id="scriptLoader">
var LOADER = {
loadedCount: 0,
toBeLoadedCount: 0,
load_jQuery: function (){
var jqNode = document.createElement("script");
jqNode.setAttribute("src", "/path/to/jquery");
jqNode.setAttribute("onload", "LOADER.loadScripts();");
jqNode.setAttribute("id", "jquery");
document.head.appendChild(jqNode);
},
loadScripts: function (){
var scriptDataLookup = this.scriptDataLookup = {};
var scriptNodes = this.scriptNodes = {};
var scriptNodesArr = this.scriptNodesArr = [];
for (var j=0; j<scriptData.length; j++){
var theEntry = scriptData[j];
scriptDataLookup[theEntry.name] = theEntry;
}
//console.log(JSON.stringify(scriptDataLookup, null, 4));
for (var i=0; i<scriptData.length; i++){
var entry = scriptData[i];
var name = entry.name;
var theURL = entry.url;
this.toBeLoadedCount++;
var node = document.createElement("script");
node.setAttribute("id", name);
scriptNodes[name] = node;
scriptNodesArr.push(node);
jQuery.ajax({
method : "GET",
url : theURL,
dataType : "text"
}).done(this.makeHandler(name, node)).fail(this.makeFailHandler(name, node));
}
},
makeFailHandler: function(name, node){
var THIS = this;
return function(xhr, errorName, errorMessage){
console.log(name, "FAIL");
console.log(xhr);
console.log(errorName);
console.log(errorMessage);
debugger;
}
},
makeHandler: function(name, node){
var THIS = this;
return function (fileContents, status, xhr){
THIS.loadedCount++;
//console.log("loaded", name, "content length", fileContents.length, "status", status);
//console.log("loaded:", THIS.loadedCount, "/", THIS.toBeLoadedCount);
THIS.scriptDataLookup[name].fileContents = fileContents;
if (THIS.loadedCount >= THIS.toBeLoadedCount){
THIS.allScriptsLoaded();
}
}
},
allScriptsLoaded: function(){
for (var i=0; i<this.scriptNodesArr.length; i++){
var scriptNode = this.scriptNodesArr[i];
var name = scriptNode.id;
var data = this.scriptDataLookup[name];
var fileContents = data.fileContents;
var textNode = document.createTextNode(fileContents);
scriptNode.appendChild(textNode);
document.head.appendChild(scriptNode); // execution is here
//console.log(scriptNode);
}
// call code to make the frames here
}
};
</script>
</head>
<frameset rows="200pixels,*" onload="LOADER.load_jQuery();">
<frame src="about:blank"></frame>
<frame src="about:blank"></frame>
</frameset>
</html>
related question
.text did get you contents of the tag, it's just that you have nothing between your open tag and your end tag. You can get the src attribute of the element using .src, and then if you want to get the javascript file you would follow the link and make an ajax request for it.
In a comment to my previous answer:
I want to store the content of the script so that I can cache it and use it directly some time later without having to fetch it from the external web server (not on the same server as the page)
In that case you're better off using a server side script to fetch and cache the script file. Depending on your server setup you could just wget the file (periodically via cron if you expect it to change) or do something similar with a small script inthe language of your choice.
if you want the contents of the src attribute, you would have to do an ajax request and look at the responsetext. If you where to have the js between and you could access it through innerHTML.
This might be of interest: http://ejohn.org/blog/degrading-script-tags/
I had a same issue, so i solve it this way:
The js file contains something like
window.someVarForReturn = `content for return`
On html
<script src="file.js"></script>
<script>console.log(someVarForReturn)</script>
In my case the content was html template. So i did something like this:
On js file
window.someVarForReturn = `<did>My template</div>`
On html
<script src="file.js"></script>
<script>
new DOMParser().parseFromString(someVarForReturn, 'text/html').body.children[0]
</script>
You cannot directly get what browser loaded as the content of your specific script tag (security hazard);
But
you can request the same resource (src) again ( which will succeed immediately due to cache ) and read it's text:
const scriptSrc = document.querySelector('script#yours').src;
// re-request the same location
const scriptContent = await fetch(scriptSrc).then((res) => res.text());
If you're looking to access the attributes of the <script> tag rather than the contents of script.js, then XPath may well be what you're after.
It will allow you to get each of the script attributes.
If it's the example.js file contents you're after, then you can fire off an AJAX request to fetch it.
It's funny but we can't, we have to fetch them again over the internet.
Likely the browser will read his cache, but a ping is still sent to verify the content-length.
[...document.scripts].forEach((script) => {
fetch(script.src)
.then((response) => response.text() )
.then((source) => console.log(source) )
})
Using 2008-style DOM-binding it would rather be:
document.getElementById('myscript').getAttribute("src");
document.getElementById('myscript').getAttribute("type");
You want to use the innerHTML property to get the contents of the script tag:
document.getElementById("myscript").innerHTML
But as #olle said in another answer you probably want to have a read of:
http://ejohn.org/blog/degrading-script-tags/
If a src attribute is provided, user agents are required to ignore the content of the element, if you need to access it from the external script, then you are probably doing something wrong.
Update: I see you've added a comment to the effect that you want to cache the script and use it later. To what end? Assuming your HTTP is cache friendly, then your caching needs are likely taken care of by the browser already.
I'd suggest the answer to this question is using the "innerHTML" property of the DOM element. Certainly, if the script has loaded, you do not need to make an Ajax call to get it.
So Sugendran should be correct (not sure why he was voted down without explanation).
var scriptContent = document.getElementById("myscript").innerHTML;
The innerHTML property of the script element should give you the scripts content as a string provided the script element is:
an inline script, or
that the script has loaded (if using the src attribute)
olle also gives the answer, but I think it got 'muddled' by his suggesting it needs to be loaded through ajax first, and i think he meant "inline" instead of between.
if you where to have the js between and you could access it through innerHTML.
Regarding the usefulness of this technique:
I've looked to use this technique for client side error logging (of javascript exceptions) after getting "undefined variables" which aren't contained within my own scripts (such as badly injected scripts from toolbars or extensions) - so I don't think it's such a way out idea.
Not sure why you would need to do this?
Another way round would be to hold the script in a hidden element somewhere and use Eval to run it. You could then query the objects innerHtml property.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I get the content of the file specified as the 'src' of a <script> tag?
this may seem like a strange question but it's been on my mind. Say I had a HTML file that references one or many JavaScript files, these files are local but could be external. Now for some reason (my own curiosity) I wish to output the contents of one of these files like a string and write it to the console or even alert the contents. So say I have the following JS file called jsFile.js:
// JavaScript Document
var testString = "I am just an output... or am I",
testNumber = 1,
testArray = [],
testObject = {};
// random functionality, etc... etc...
if(testNumber > 100){
// do something...
}
and I want to output this like so when opening my HTML page:
however I am unsure how to do this, can I find the SCRIPT tag in the dom and use a method on it to output it's contents (see below) or do I have to read the file (somehow) then loop through each line of code collecting it in a variable, then output it by either alert or console.log
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<script type="text/javascript" src="jsFile.js"></script>
<script type="text/javascript">
// find the JS node...
window.onload = function(){
var theFile = document.getElementsByTagName("script")[0];
// none of these will work as the code within the jsFile.js is not a DOM object...
console.log(theFile.text); // returns a zero length string
console.log(theFile.innerHTML); // returns a zero length string
console.log(theFile.textContent); // returns a zero length string
}
</script>
<body>
I am just a HTML file... no more, no less...
</body>
</html>
Above is my first attempt however none of these methods will work as the contents of the script are not DOM objects. I don't need a code specific answer, just a proof of concept, idea or point in the right direction. If I'm not making sense please say so and I will reword my question.
You will need to make an AJAX request to the URL of that script and display the content where ever you want to (just grab the responseText), it is a server side resource, and the returned content will be your javascript :)
While epoch essentially has answered this already, I was triggered by this challenge, I've written a little snippet that dumps all scripting resources to the console, provided that they are upon the same domain (origin). I've tested it in Chrome.
var f = function (src) {
var origin = location.origin || (location.protocol+'//'+location.hostname);
if (src.substr(0, origin.length) != origin) {
return;
}
x = new XMLHttpRequest();
x.open("GET", src.substr(origin.length), true);
x.onreadystatechange = function () {
if (x.readyState == 4 && x.status == 200) {
console.log(x.responseText)
}
};
x.send();
};
var s = document.getElementsByTagName('script');
for (var i = 0; i < s.length; ++i) {
f(s[i].src);
}