I am still a beginner in Javascript and I wondering if I can use innerHTML to post the whole HTML content from another page.
I have used innerHTML to just post an HTML code within the same .js page. For example:
I have main.js that contains this
class MyComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h1>Hello world</h1>`;
}
}
customElements.define('my-component', MyComponent);
and in the index.html I use this code to implement the main.js
<!doctype html>
<html lang="en">
<head>
<script type="application/javascript" src="js/main.js"></script>
</head>
<body>
<my-component></my-component>
</body>
</html>
The question is can I include an HTML page instead <h1>Hello world</h1> like header.html to get the whole HTML code from it? if not, Is there any way to do that?
Thanks.
Edit: I mean for example if I have a page named footer.html and in that page, I have an h1 ex. "Hello world" And I need to use the same h1 in another page index.html without rewrite it again. Can I make that h1 as a template to use in any other page using javascript?
My idea that I was looking for is:
Making main.js
get h1 from footer.html in main.js
import that script in index.html
using h1 in index.html
I know that I can do that using "include" in PHP but I am just trying to do it by javascript.
You can try:
document.body.innerHTML
to access page content.
You can do that with AJAX. Set an URL for that file and make a get request with AJAX.
Using JQUERY
$.get("file_path.html", function(fileText){});
Related
The only related question I found for my issue is this one:
page fetched by AJAX cannot execute any javascript
But I don't want do use JQuery. I want to use vanilla javascript.
The problem is that I can't execute any javacript that is inside an html page that is fetched using the fetch api.
Here are my files:
index.html: This is the initial HTML page. It requests a file called index.js as an ES6 module
<!DOCTYPE html>
<html>
<head>
<script type="module" src="index.js"></script>
</head>
<body>
<main id="content" role="main"></main>
</body>
</html>
Then I have my index.js file:
import openTemplate from './shared-assets/js/openTemplate.js';
const target = document.getElementById('content');
openTemplate('dashboard.html', target);
This is the openTemplate.js file:
export default function openTemplate(templatePath, targetElement){
fetch(templatePath).then(response => {
response.text().then(html => targetElement.innerHTML = html);
});
}
And finally, the dashboard.html template that refuses to execute javascript:
<h1>Dashboard</h1>
<script type="module">
import myAlertFunction from 'myAlertFunction.js';
// this is just a function that encapsulates an alert call
// my real code will have much more complex functions being imported
myAlertFunction('test');
</script>
All this code should result in a scenario in which, when my index.html page loads, an alert should display with the text 'test', but this is not happening.
I want this to run on Firefox Quantum >= 66
What am I missing?
I've been trying to import a html form and embedded it into a separate html file, my javascript to try and upload the file containing the form looks like this
<link rel="import" href="formhtml5.html" onload="handleLoad(event)"
onerror="handleError(event)">
var link = document.querySelector('link[rel="import"]');
var el = link.import.querySelector('#flexyForm');
document.body.appendChild(link);
however when I try and see if the form is uploaded my page is just blank? been struggling with this for days now and its driving me nuts, anyone got any guesses to see how it works?
If this is what you're looking for, it's possible with jQuery.
firstFile.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includeForm").load("formFile.html");
});
</script>
</head>
<body>
<div id="includeForm"></div>
</body>
</html>
formFile.html
<p>This is my Form</p>
Note: Your question is not clear, you're not uploading anything. Instead you're just importing some lines of code from another html file to yours. If yes, above code should work fine!
Also, If the included HTML file has CSS attached to it, it might mess up your page style. So better to do internal CSS or change the CSS external link in formFile as per link rules of firstFile.html
You can also use php in additional to JS to get the content of the second file.
<?php file_get_contents="path to your file here" ?>
I have an argument in JS which holds pretty much the data. It's the server information to my server. It changes often, e.g 20/64 or 32/64. You get the point.
I am trying to get the contents of the data to go on an external site, however, when I try, it doesn't work.
To summerise, I have a div which holds the data, I want to get that data using JS and put it on an external site which isn't using the same domain or web server.
HTML FILE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="serverstats-wrapper"></div>
<script src="import.js"></script>
</body>
JS File:
$(document).ready(function(){
$.post("query.php", {},
function (data) {
$('#serverstats-wrapper').html (data);
});
});
var the_main = document.getElementById("serverstats-wrapper");
var the_data = the_main.textContent ? the_main.textContent : the_main.innerText;
I want to get the text from the html file to the js file then take it to an external website.
Tasid! This won't work! JS does't have such a technique implementet. To do so, you need node.js. This allows you to send the data over a socket to your other webserver.
It does't work difrently, because JS is executed direct on your PC.
You can grab data from another site; but you cannot inject JS code into another site. Here are some methods to retrieve html from another site: Include another HTML file in a HTML file
I'm a beginner of jQuery. I wanne write my jQuery in an external js file instead of in the head of html file, but it failed.
index.html:
<!DOCTYPE html>
<head>
<script src="js/func.js"></script>
</head>
<body>
<p id="response">response is shown here</p>
<button id="bt_testJQ">jq test</button>
</body>
</html>
func.js
document.write("<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>")`
`$(document).ready(function () {
$("#bt_testJQ").click(function () {
$("#response").toggle();
})
})
`
This has nothing to do with putting the code in an external file, you'd have the same problem if it was inline.
document.write's output is placed after the <script></script> element and parsed by the HTML parser when the script has finished running. Effectively, you are:
setting up jQuery to load
Trying to use jQuery
actually loading jQuery
You can't use jQuery before you load it.
The simple solution to this is to use two script elements in the HTML and load jQuery first.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="js/func.js"></script><!-- with the document.write line removed -->
just wanna to avoid importing the jquery in every html file.
This is best handled by either:
Using a template system.
Using a build system that combines the contents of all your scripts, including third party libraries, into a single file.
A better way of doing this is have the jquery library called at the head and have your external js script at the last part of the body of your html
html code
<!DOCTYPE html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
</head>
<body>
<p id="response">response is shown here</p>
<button id="bt_testJQ">jq test</button>
<script src="js/func.js"></script>
</body>
</html>
I have an application that allows the use of inline javascript, but not javascript from source files. I'm trying to modify a webpage to open on this browser, and need to know how to put the javascript files from the webpage inline.
Use <script> tags in your HTML. They can go anywhere - I prefer inside the <head> tag:
<head>
<script type="text/javascript">
// put anything here - any type of valid javascript works
// if you import jquery, you can use jquery here too!
</script>
</head>
You should place your imported code into the script tag in your HTML page (application in your case), look at the following example:
<html>
<head>
<script type="text/javascript">
//Import your JS script here, e.g.:
function doSomething(){
..
}
</script>
</head>
<body>...</body>
</html>