I have this simple html:
<head>
<h1>Prueba</h1>
</head>
<body>
<form method="POST" action="">
Introduce KeyWord <input type="text" name="key">
<input type="submit" name="submit" value="Submit">
</form>
</body>
Now, i want to include inside other html which has severak .js attached. I have seen different ways but i only get include only the file html, without the .js attached.
Any help? Thank you so much!
Edit: This is the other html that i want include inside, with the js attached:
<html>
<head>
<meta charset="UTF-8">
<title>Word Cloud</title>
<script src="d3.js" charset="utf-8"></script>
<script src="d3.layout.cloud.js"></script>
<script src="d3.wordcloud.js"></script>
<script src="example.words.js"></script>
</head>
<body style="text-align: center">
<h1>Word Cloud</h1>
<div id='wordcloud'></div>
</body>
</html>
Demo Link : https://plnkr.co/edit/kByh82pSAw6sQAOFp5gO?p=preview
you can include html file using this javascript function:
javascript: and html code:
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
includeHTML();
<!DOCTYPE html>
<html>
<body>
<div w3-include-html="<**html-name-file**>"></div>
</body>
</html>
i found this code there
You can make use of an iframe to embed another website into yours like so:
<iframe src="other.html" height="200" width="300"></iframe>
In this case other.html contained links to other pages in the website and links to js files.
Demo Link: https://plnkr.co/edit/kByh82pSAw6sQAOFp5gO?p=preview
This one is working absolutely fine.
Keep one thing in mind that if you will test on your PC it will not work directly. You will get an error in your console Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https..
So, do test on the server I mean localhost
Happy Coding
<!DOCTYPE html>
<html>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("data-include");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
// Get the DOMPareser to parse String into HTML
var parser = new DOMParser();
var doc = parser.parseFromString(this.responseText, "text/html");;
elmnt.innerHTML = this.response ;
var allscripts = doc.getElementsByTagName('script');
// Run all the Javascript
for(var k = 0; k<allscripts.length;k++){
var x = allscripts[k].innerHTML;
eval(x);
}
}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("data-include");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
<body>
<div data-include="text.html"></div>
<script>
includeHTML();
</script>
</body>
</html>
Related
My question is: Could insert a jsp response (html) in html?
I think using XmlHttpRequest.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.jsp", true);
xhttp.send();
My question is: But if I have javascript in my jsp that it executes after page loading, is it executed like when I call jsp directly by browser url?
Thanks in advance
For example:
This is index.html
<html>
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body onload="loadInfo();">
<div id="container"></div>
</body>
This is app.js:
function loadInfo(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("container").innerHTML =this.responseText;
}
};
xhttp.open("GET", "info.html", true);
xhttp.send();
}
This is info.html (i have jsp but i think it is the same..):
<html>
<head>
<script type="text/javascript" src="info.js"></script>
</head>
<body>
<div id="body_info">This is info..</div>
<script type="text/javascript" >
console.log("wait for info..");
info();
</script>
</body>
This is info.js:
function info(){
document.getElementById("body_info").innerHTML ="info.js is executed";
}
If i call info.html, typing url in browser(example http://localhost:8000/info.html), the script is executed and i get
"info.js is executed",instead if i call index.html, maybe the xhr request not return the same but I see "This is info".
how can i resolve and accomplish this problem using xhr?
Thanks
Roberto
When you make ajax called to some page so what ever will there under <body></body> will return as response so in your code this.responseText will be having <script></script> code in it also. You can check if you are using chrome then click on element tab you will see <script></script> also which is return as response .Now,to execute this you can do like below :
function loadInfo() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("container").innerHTML = this.responseText;
//getting the script which is return as response back
var datas = document.getElementById("container").getElementsByTagName("script");
//looping unders <script></script>
for (var i = 0; i < datas.length; i++) {
console.log("inside script executing")
eval(datas[i].innerText); //executing script
}
}
};
xhttp.open("GET", "n.html", true);
xhttp.send();
}
And your script for info.html look like below :
<script>
console.log("wait for info..");
info();
function info() {
document.getElementById("body_info").innerHTML = "info.js is executed";
}
</script>
I'm new to this forum and I want to ask a question on how can I make an image from an xml file to load itself using DOM? here is my code and I don't know what's wrong in it. Can anyone help me debug this please? thanks :)
<html>
<head>
<script language="javascript" type="text/javascript">
function showImage(){
var xmlimg = document.getElementById("myphoto");
var photo=xmlimg.getElementsByTagName("photo");
var showImg =document.createElement("div");
showImg.createElement("IMG");
showImg.setAttribute("src","sunset.jpg");
var getImage=document.createElement("div");
getImage.setAttribute("class","fileko");
showImg.appendChild(getImage);
var viewimage= document.createTextNode(photo.getElementsByTagName("fileko")[0].firstChild.data);
getImage.appendChild(viewimage);
getImage.appendChild(viewimage);
var getAttr=document.createElement("div");
getAttr.getAttribute("stolen");
showImg.appendChild(getAttr);
document.getElementsByTagName("body")[0].appendChild(showImg);
}
</script>
</head>
<body onload="showimage()" style="display:none">
<xml id="myphoto" >
<photo kind="stolen">
<fileko>sunset.jpg</fileko>
<desc>Sunrise</desc>
</photo>
</xml>
</body>
</html>
You can do an Ajax request to the xml file and get the data needed. Then create an Image element with the proper properties based on retrieved data and then append that image element into the DOM.
yes it is possible just follow below code and you will get that easily what you need to do. this is my code that is fetching data from xml file
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
my xml look like this
xml file
I have this type of xml
<root>
<Message code="AC_CONNECTOR__FAIL_IN_CONNECT"
id="AR_AC_CONNECTOR__FAIL_IN_CONNECT"
bundleName="Error" locale="pt" severity="4" userFlag="">
(AR1-000001) Error in the data
</Message>
<Message code="AC_CONNECTOR__FAIL_IN_DISCONNECT"
id="AR_AC_CONNECTOR__FAIL_IN_DISCONNECT" bundleName="Error"
locale="pt" severity="4" userFlag="">
(AR1-000001) error
</Message>
</root>
and i want it to be read in the javascript
after reading this i need to replace value of the message with another based on the code property of the message
i have done this code ...
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reading XML</title>
<script type="text/javascript">
function readXML() {
var xml = new XMLHttpRequest();
xml.open('GET', 'error1.xml', false);
xml.send();
var xmldata = xml.responseXML;
document.write("Nutan");
xmldata = (new DOMParser()).parseFromString(xml.responseText, 'text/xml');
var emp = xmldata.getElementsByTagName("ptr");
// document.write(emp);
var output=emp[0].getElementsByTagName("Message")[0].firstChild.data;
document.write(output);
}
</script>
</head>
<body>
<h1>
XMl file
</h1>
<button onclick="readXML()">Read xml file</button>
</body>
</html>
but this code is not reading the xml file ..which is in above format
please help me to read xml file with above format
If you want to access the code value you have to use the getAttribute("code") function reference, if you want to list the code value for each child the following code is working.
<html>
<head>
<script>
function readXML() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "error1.xml", true);
xhttp.send();
}
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("Message");
for (var i = 0; i < x.length; i++) {
var node_code = x[i].getAttribute("code");
document.write(node_code + " ");
var node_value = x[i].childNodes[0].nodeValue;
document.write(node_value + " <br>");
}
}
</script>
</head>
<body>
<button onclick="readXML()">Read xml file</button>
</body>
</html>
It's better if you separate your JS code from your HTML by using two separate files. If this isn't what you are looking for please explain your problem better.
I am attempting to write this code so when I click on the XML button it will show my XML document. I am unable to get the button to do anything, I am assuming that the function is missing something. Any help would be appreciated. Thanks in advance.
Function
<script language = "JavaScript">
xmlOpen = function(){
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("GET","gameXML.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
}
</script>
Button HTML
<p>
<label>List of users:</label>
<input type="button" value="XML" id="users" onclick="xmlOpen()">
</p>
Are you serving these files from a web server? OR are you just opening the HTML page from your file system? If you use Chrome and try to open the HTML file from your file system, you will get an error (see the console) when you click the "XML" button.
To get around this, you can either serve the files from a web server (even on your local machine) OR you could try opening the HTML page in Firefox.
In terms of displaying the contents of the XML file, try taking a look at this question: How do I loop through XML Nodes in JavaScript?
Update:
I was successful in testing with the code below. Opening the HTML file from my Desktop in Firefox.
gameXML.xml
<?xml version="1.0" encoding="UTF-8" ?>
<users>
<user>Bob</user>
<user>James</user>
<user>Karen</user>
<user>Tom</user>
<user>Linda</user>
</users>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Test Page</title>
</head>
<body>
<p>
<label>List of users:</label>
<input type="button" value="XML" id="users" onclick="xmlOpen()">
<table id="tbody"></table>
</p>
<script language = "JavaScript">
xmlOpen = function(){
var users, i, len;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
xmlhttp.open("GET", "gameXML.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
users = xmlDoc.getElementsByTagName("user");
len = users.length;
for (i = 0; i < len; i++) {
var user = users[i].firstChild.nodeValue;
var tr = document.createElement("tr");
var td = document.createElement("td");
var textNode = document.createTextNode(user);
td.appendChild(textNode);
tr.appendChild(td);
document.getElementById("tbody").appendChild(tr);
}
}
</script>
</body>
</html>
Screenshot of result:
did you forget to display the data? If so, add this to your function:
document.getElementById('users').innerHTML = xmlDoc;
If that does not work, change responseXML to responseText.
If that does not work, try replacing
xmlhttp.open("GET","gameXML.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
with
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("users").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gameXML.xml",true);
xmlhttp.send();
The code below is to read a text file using javascript. it works.
However, I just want to read part of the content.
For example, the content of the file is :"Hello world!"
I just want to display "Hello".
I tried function split(), but it only works on strings. I don't know how to insert it here.
var urls = ["data.txt"];
function loadUrl() {
var urlToLoad = urls[0];
alert("load URL ... " + urlToLoad);
browser.setAttributeNS(xlinkNS, "href", urlToLoad);
}
thank you!!!
I used
jQuery.get('http://localhost/foo.txt', function(data) {
var myvar = data;
});
, and got data from my text file.
Or try this
JQuery provides a method $.get which can capture the data from a URL. So to "read" the html/text document, it needs to be accessible through a URL. Once you fetch the HTML contents you should just be able to wrap that markup as a jQuery wrapped set and search it as normal.
Untested, but the general gist of it...
var HTML_FILE_URL = '/whatever/html/file.html';
$(document).ready(function() {
$.get(HTML_FILE_URL, function(data) {
var fileDom = $(data);
fileDom.find('h2').each(function() {
alert($(this).text());
});
});
});
Try this to read separate words if I understood correctly what you need.
Create a file with the contents "hello world" and browse to it with the example script.
The output is "hello".
<html>
<head>
<input type="file" id="fileinput" />
<script type="text/javascript">
function readSingleFile(evt) {
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
var ct = r.result;
var words = ct.split(' ');
alert(words[0]);
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>
</head>
<body>
</body>
</html>
Reading directly has to be with an ajax request due to the javascript restrictions regarding safety.
This code shoudl perform the requested operation:
<html>
<head>
<input type="file" id="fileinput" />
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status==200 && xmlhttp.readyState==4){
var words = xmlhttp.responseText.split(' ');
alert(words[0]);
}
}
xmlhttp.open("GET","FileName.txt",true);
xmlhttp.send();
</script>
</head>
<body>
</body>
</html>
Opening a file in javascript with ajax (without using any framework)
var urls = ["data.txt"];
xhrDoc= new XMLHttpRequest();
xhrDoc.open('GET', urls[0] , async)
if (xhrDoc.overrideMimeType)
xhrDoc.overrideMimeType('text/plain; charset=x-user-defined')
xhrDoc.onreadystatechange =function()
{
if (this.readyState == 4)
{
if (this.status == 200)
{
var data= this.response; //Here is a string of the text data
}
}
}
xhrDoc.send() //sending the request