I got a html file like this,
<!DOCTYPE html>
<html lang="en">
<head>
//some content
</head>
<body>
//some content
</body>
</html>
My question is how to load this file as a whole with jquery. I tried it with
append function, but it didn't work.. I searched for the solution for quite a while, but just found a lot of methods to append some parts of html file, like meta, link, not a whole file.
Can I do it with jquery?
index.html or whatever
<iframe src="filename.html"></iframe>
filename.html
<!DOCTYPE html>
<html lang="en">
<head>
//some content
</head>
<body>
//some content
</body>
</html>
You can use <link> element with rel attribute set to import, href set to path to file, type set to "text/html". Use XMLSerializer() instance .serializeToString() with replacement document .doctype property as parameter to get <!DOCTYPE> declaration from imported document; document.write() with .import.documentElement.outerHTML property of link element as parameter to replace existing .doctype and <html> node with .doctype and <html> of imported document.
<!DOCTYPE html>
<html lang="en">
<head>
<link id="doc" rel="import" href="https://gist.githubusercontent.com/guest271314/9921cb52b143437b23f23fa32284ca35/raw/86532c043b666bce15b33c91dc29e98615dd4e25/replacementDocument.html" type="text/html" />
</head>
<body>
//original content
<button>load html document</button>
<script>
var link = document.getElementById("doc");
document.querySelector("button")
.onclick = function() {
// http://stackoverflow.com/a/30565562/
var dt = new XMLSerializer().serializeToString(link.import.doctype);
document.write(dt, link.import.documentElement.outerHTML);
document.close();
}
</script>
</body>
</html>
Related
I would like to convert this html script into a chrome extension. I followed this short tuto and apparently, I should move all the script ●parts into a .jsfile:
Due to security constraints, we can’t put inline JavaScript into our
HTML files inside of our Chrome extensions, so we have to create a
separate file to hold any JavaScript code we need and we’ll reference
it from the HTML file.
So instead of having just this html:
<!DOCTYPE html> <html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body> </html>
I should have one html ...:
<!DOCTYPE html>
<html>
<body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
</body>
</html>
...and one .js. But I am not sure how to go with the .js. How shoudl I call the script //translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en. Also should I add the function googleSectionalElementInit inside a document.addEventListener function?
Also will the script work because it will be stored on my local computer and not a server?
I'm executing an internal script (and external scripts), using <script> inside <head>.
I'd like to execute some JavaScript after the document has been "loaded".
I put a "onload" attribute inside the body :
<body onload="myFunctionName();">
I call the function with the "onchange" attribute inside the jsp (inside <html:select ... > struts tag) :
onchange="javascript:myFunctionName();"
The "onchange" attribute works but not the "onload" attribute. Why ?
My code is working here !
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body onload="myFunctionName();">
</body>
</html>
<script type="text/javascript">
function myFunctionName(){
alert('I am here!');
}
myFunctionName();
</script>
You can try this
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body onload="myFunctionName();">
</body>
</html>
<script type="text/javascript">
function myFunctionName(){
alert('I am myFunctionName!');
}
</script>
But good practice is to separate javascript from html.
It doesn't work because HTML 5 doesn't support the onload attribute. (<!doctype html>)
I use a shortcut
by detecting an error of an image.
Here is an example that you can just copy&paste:
<!doctype html>
<html>
<head>
<title>Your Title</title>
<head>
<body>
<img src="noSrc" alt="" onerror="myFunction()">
<!--This img tag and all the attributes are mandatory or else it will not work-->
<script>
function myFunction() {
//code here
document.write("Document Loaded."); //example
window.alert("Document Loaded");
}
</script>
</body>
</html>
Good Luck!!
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I am just trying to get into the absolute basics of JS and HTML. Basically I want to execute a super simple js.
Here's my test.js file:
document.getElementById("test").innerHTML = "Loaded js file";
Here's my test.html:
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Testing page</title>
<meta charset="utf-8">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<p id="test">Not loaded</p>
</body>
</html>
Both files are located in the same folder. What should happen is that the "Not loaded" text gets replaced by "Loaded js file", but it just doesn't happen. What am I doing wrong?
This is because the JavaScript loads before the element does. You have two ways.
Quick and Dirty way
Move the JavaScript after the element.
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Testing page</title>
<meta charset="utf-8" />
</head>
<body>
<p id="test">Not loaded</p>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
Using Event Handler
Or, use document's load event handler in the JavaScript.
$(function () {
document.getElementById("test").innerHTML = "Loaded js file";
});
Since you are using jQuery, you can keep it in a simple way:
$(function () {
$("#test").html("Loaded js file");
});
Note: I prefer this method to the above method, as this function gets executed only when the document is loaded fully and it is unobtrusive as well.
That's because you have to wait until the window has been loaded.
window.onload = function() {
document.getElementById("test").innerHTML = "Loaded js file";
};
The elements of the DOM are parsed in a sequential order.
The script is an element too. In your case the script has been parsed but the p element has not been parsed yet, because the execution of the script stops all HTML parsing until it reaches the end of the file.
Therefor your script should be replaced at the bottom of the file in order to query the DOM.
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Testing page</title>
<meta charset="utf-8">
</head>
<body>
<p id="test">Not loaded</p>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
or place the script at the top, but wait for the to dom load event
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("test").innerHTML = "Loaded js file";
}, false);
Script is loaded before DOM's are ready, when you setting innerHTML, DOM object #test not exist yet.
Solution - wrap js content in function onload:
window.onload = function() {
document.getElementById("test").innerHTML = "Loaded js file";
};
I'm new to JavaScript and just want to put my JavaScript code in another file.
This is my html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>my badass page</title>
<script type="text/javascript" scr = "testing.js"></script>//this contains the function I want to call
</head>
<body id="body">
<button type="button", onclick="showDate()">show the date</button>
</body>
</html>
This is the testing.js file:
function showDate() {
alert ("this works")
}
I'm assuming that I just make a beginner mistake because it seems really common but I can't figure it out.
you spelled the 'src' attribute incorrectly on your tag
you spelled it scr, it should be src
this:
<script type="text/javascript" scr = "testing.js"></script>
should be this:
<script type="text/javascript" src = "testing.js"></script>
change the button to
<button type="button" onclick="showDate()">show the date</button>
and change scr to src
EDIT: source that works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>my badass page</title>
<script type="text/javascript" src="testing.js">
</script>
</head>
<body id="body">
<button type="button" onclick="showDate();">show the date</button>
</body>
</html>
Quick use of html validator such as http://validator.w3.org/nu/ will uncover lots of problems in your code. Just copy paste and correct the errors.
I'm new to JavaScript and I've learned that JavaScript can be place between the <head></head> or <body></body> sections, I have been working in a project and it works fine inside the head but not the body section of the page.
examples:
working fine like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
<script>
function yetAnotherAlert(textToAlert) {
alert(textToAlert);
}
yetAnotherAlert("Hello World");
And is not working this way:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
</head>
<body>
<script>
function yetAnotherAlert(textToAlert) {
alert(textToAlert);
}
yetAnotherAlert("Hello World");
</script>
</body>
</html>
Your code snippet didn't show you closing the tag. Double check if you close your script block correctly.
It's also better to specify the type of scripting language too.
<script language='javascript'>
....
</script>