I've added a WebView into my project. If I navigate to the html file that contains external javascript files they don't work. Bit if I write the javascript code hardcoded into the html file it works properly.
Here is the html portion:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="testjs.js"></script>
</head>
<body>
<div id="abcd"></div>
<br/>
hello! this is a simple html block.
</body>
</html>
Here is the javascript portion:
document.getElementById("abcd").innerHTML = "New text!";
When I open the webview it shows
hello! this is a simple html block.,
but if the javascript code worked it would show
New Test!
hello! this is a simple html block.
Here is the folder structure:
src="testjs.js" is correct. The issue is not related to the path.
[Update 1]
Your code should work as we usually do for web development. But seems we need to make sure the html element used in the script has been initialized, so we have to put the to the end of the body element. Please try the following html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="abcd">a</div>
<br />
hello! this is a simple html block.
<script type="text/javascript" src="testjs.js"></script>
</body>
</html>
[Update 2]
Also check if you have changed the build action for testjs.js to content. go to Solution Explorer -> right click on testjs.js -> Properties -> change Build Action to Content. That will make sure the .js file will be deployed as part of you app.
WebView msdn page suggests that for security reasons you can not link to local content except for:
However, you can still link to HTML content in the app package using the ms-appx-web scheme, and to web content using the http and https URI schemes.
So you should be able to link to your script file using ms-appx-web:///testjs.js url.
Related
I am working on a project where I have to add external HTML files as a header and footer in the main (Index.html) page. I tried below script, but it didn't work
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#header1').load("mainheader.html");
});
</script>
</head>
<body>
<div id="header1"></div>
</body>
</html>
You can use iframe tag to load another html file or url.
<iframe src="your-html-route/another.html"></iframe>
Use JavaScript and work with components. Then you can work with modules to import or export a component and add HTML with
document.queryselector('#header').innerHTML = '<header>content</header>';
PHP is better for such a thing if you ask me. Make you header and footer in another .php file and include them on every page where you want use them.
Your script $('#header1').load("mainheader.html"); is correct. The fact is that the load() method (just like ajax) works exclusively on the SERVER. In order to load an external page to your tag using the load() method, you need to put your project on the server, or deploy a local server on your computer. There are many programs for this, for example: OpenServer, Denwer, WampServer, XAMPP, etc. I advise you to use OpenServer. It's free and easy to use. After you deploy your local server, you push your project to your server and the load() method will load your external html file.
If it's only a short bit of code then you could use this:
<pre>
<code>
HTML code goes
here.
</code>
</pre>
I am new to JS. I made a simple Snake game using vanilla JS in VS Code. There is minimal CSS in the code so I put that in the html.
When I open the index.html from VS Code with Live Server (http://127.0.0.1:5500/) it works fine.
But when I open it from the file explorer (file:///D:/Prog/Javascript/VanillaJS_projects/Snake/index.html) only the html gets loaded, no Snake and Food pieces appear. And the same happens if I try to open it with htmlpreview.github.io
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<script src="game.js" defer type="module"></script>
<style>
...
</style>
</head>
<body>
<div id="game-board"></div>
</body>
</html>
It doesn't matter what browser I use, I get the same result.
What is the difference? Why won't it load properly?
You browsers honor Content Security Policy.
If you open file:/// URLs, you may think of your browser as a poor man's file viewer.
I'm starting on a project using netbeans. I created a Web Page Project and its default .html is called "index". In index.html directory, it has a folder called "WEB-INF". I created a new folder inside of it and call it JavaScripts. Then I created a JS file inside that JavaScripts folder.
Below is my html and JS:
html:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="WEB-INF/JavaScripts/index.js"/>
</head>
<body>
</body>
</html>
JS:
document.write("testabc");
Its a very simple JS code but nothing appearing on my browser. How can I properly link JS(from different folder) to HTML? Thanks in advance.
My js external file is not working in a head tag, however, it's working on calling at the end of code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> java Script</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="myjavascript.js"> </script>
</head>
Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. If your script tries to access an element in the <body> of your file, it will fail because that part of the DOM is not loaded as yet.
Place your script before the end <body> tag.
https://developers.google.com/speed/docs/insights/BlockingJS
I have the angular.min.js library installed on ubuntu 14.04 under /opt/mean/public/lib/angular/angular.min.js, and in a view made in accordance with a tutorial from lynda I have the following view:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="/opt/mean/public/lib/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name">
<h2>Welcome {{name}}</h2>
</body>
</html>
The contents of the h2 tag should be dynamically updating as text is entered but it is not. Furthermore on the console I get a 404 error for the angular.min.js file.
The MEAN stack is the premade one found on digitalocean, if that matters.
try using the path
/lib/angular/angular.min.js
instead of
/opt/mean/public/lib/angular/angular.min.js