This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Creating a page that updates without reloading
I want to get the content of an HTML page from it's URL and put it somehwere in the current document. The pseudo-code below shows the approach I want to take:
<!DOCTYPE html>
<html>
<body>
<p id="text"></p>
<script type="text/javascript">
function getPageText(htmlPage)
{
//comment: How do I get innerHTML?
var text = htmlPage.body.innerHTML;
//comment: How do I have to return?
return text;
}
document.getElementById("text").innerHTML=getPageText("https://google.com");
</script>
</body>
</html>
The name of the technique you are looking for is AJAX --- You need to download the remote page (and it has to allow you to) in order for javascript to get the content of the page.
see another answer for an overview of that technique --- https://stackoverflow.com/a/10168402/473914
you need to extract content from google and then you could use innerHtml. Alternatively you can use iframe and wrap scr dynamically or statically. code for wraping scr dynamically is as follow.
a.html
<html>
<head>
<script>
function getPageText(url){
document.getElementById("container").setAttribute("src",url);
}
getPageText("https://www.google.com");
</script>
</head>
<body>
<iframe id='container'></iframe>
</body>
</html>
Related
This question already has answers here:
Share data between HTML pages
(4 answers)
Closed 2 years ago.
I have a project I'm working on that has multiple pages. Both of them have a JavaScript tag.
I want to be able to get a variable from the other one.
First HTML
<html>
<head></head>
<body>
<script>
var example = "stringText"
</script>
</body>
</html>
Second HTML
<html>
<head></head>
<body>
<script>
console.log(example)
</script>
</body>
</html>
I have tried making a .js file and saving a variable there and accessing it from the other file but it didn't work, the variable would clear itself when it got to the other page.
It is a possible way to approach.
This question already has answers here:
Can scripts be inserted with innerHTML?
(26 answers)
Closed 4 years ago.
I was experimenting with getting a fragment of HTML using the fetch API, and then adding it to an HTML page. While this works fine for HTML content, I noticed that if I put a <script> tag in the fragment, the tag isn't stripped out, but it also isn't executed.
Below is an example. I would expect the alert to fire, but it doesn't, even though the script tag appears on the page.
My questions are (1) why does the <script> not get evaluated, and (2) is there a way to make it evaluate?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
fragment.html
<h1>Hello</h1>
<p>It works</p>
<script>
alert('hello') // doesn't work, but script still appears on page
</script>
main.js
fetch('fragment.html').then((res)=>{
return res.text()
}).then((data)=>{
var div = document.createElement('div')
div.innerHTML = data
document.body.appendChild(div)
})
Because that's what the HTML spec dictates:
script elements inserted using innerHTML do not execute when they are
inserted.
I'm making assumptions here, but it's probably to introduce a layer of security so that you don't accidentally introduce XSS or code injection.
If you want to get the scripts to run, take their content, create a specific <script> element, set the script's body to the content, and then insert that into the DOM:
const script = document.createElement("script"),
text = document.createTextNode("console.log('foo')");
script.appendChild(text);
document.body.appendChild(script);
This question already has answers here:
How do I set/unset a cookie with jQuery?
(18 answers)
Closed 6 years ago.
Passing of values from one html page to another html page using javascript
And below is my code:
Fisrt page as html1.html:
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
{
window.location.assign("html2.html");
}
</script>
</head>
<body>
<input type="button" value="submit" onclick="newDoc ()">
</body>
</html>
And the second html code as html2.html:
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc()
{
window.location.assign("html1.html");
}
</script>
</head>
<body>
<input type="button" value="submit" onclick="newDoc ()">
</body>
</html>
In html we can load other files into one html file using Iframe
<body>
<iframe src="html2.html">
</iframe>
</body>
We can use jquery function to load the file into some specific div.
<script>
$(function(){
$('#header').load("header2.html");
});
</script>
In javascript, window.location object has a search attribute. So, if your location is http://example.com/html1.html?foo=bar then your window.location.search is ?foo=bar (console.log(window.location)).
How to parse search string: How can I get query string values in JavaScript?
If the variable that you want to pass is important for your application, maybe it will be better to store it in localStorage/sessionStorage or a cookie.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
I'm trying to get the element with getElementById(), but it returns null even though the element exists. What am I doing wrong?
<html>
<head>
<title>blah</title>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</head>
<body>
<div id="abc">
</div>
</body>
You have to put this in a document load event. The DOM hasn't gotten to abc by the time the script is executed.
Your script runs before the DOM has been loaded. To fix this you can place your code in the window.onload function like so:
window.onload = function() {
alert(document.getElementById("abc"));
};
An alternative is to place your script right before the closing </body> tag.
If you don't want to attach to the load event then simply put your script at the bottom of the body, so it will execute at the end-
<html>
<head>
<title>blah</title>
</head>
<body>
<div id="abc">
</div>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</body>
</html>
This is because the script runs before the page has rendered.
For proof add this attribute to the body tag:
<body onload="alert(document.getElementById('abc'));" >
But it doesn't exist, not at that point in the HTML. HTML documents are parsed top-to-bottom, just like programs run. The best solution is just to put your script tag at the bottom of the page. You could also attach your JavaScript to the onload event.
This question already has answers here:
JavaScript: Inline Script with SRC Attribute?
(3 answers)
Closed 8 years ago.
When I launch this in chrome, nothing appears on the page.
<!DOCTYPE html>
<head><title>test 4000</title><head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
document.writeln("test")
</script>
</body>
</html>
you are inserting code in a script tag that you are also using to load an external script (jQuery). you should either do the one or the other.
<script>
document.writeln("test");
</script>
if you want both do:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
document.writeln("test");
</script>
the reference states:
If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.
you do not need to include jQuery to use document.writeln()