Injecting data into HTML tag - javascript

I'm developing an extension for Microsoft Edge and have learned from the docs here https://learn.microsoft.com/en-us/microsoft-edge/extensions/guides/creating-an-extension#writing-a-more-complex-extension that I can use Javascript for data manipulation.
For some reason though, when I try to modify a DOM element like this:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script type='text/javascript'>
document.getElementsByTagName('P')[0].innerHTML = 'something';
</script>
</body>
</html>
I get the desired result in any HTML / JAVASCRIPT interpreter but when I try to test it out in the extension the DOM manipulation isn't working. The p element isn't populated with 'something'. The manifest.json file is included in the extension folder I'm just not including it here as it's not relevant to the question.
How should I go about this ?
Update:
window.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='window.css'>
</head>
<body>
<div><p></p></div>
<script src="window.js"></script>
</body>
</html>
window.js:
window.onload() {
document.getElementsByTagName('P')[0].innerHTML = 'hakuna matata';
};

You should import the JavaScript function using <script> tag like below:
In myfunction.js file of js folder:
document.getElementsByTagName('p')[0].innerHTML = 'something';
In html file:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script src="js/myfunction.js"></script>
</body>
</html>
I tested it in Edge extension: If we use the JavaScript function directly in the html page then it doesn't work. If we use a link to the js file then it works.

Related

Why a simple <script src="..."> </script> doesn't work?

I'm working on a project, and I didn't understand why a call to external script doesn't work.
Then I just did a extremely simple page html which includes a script alert, as you can see below... Can you tell me what's the problem ? I believe the problem is not the code, but what else can it be?
My browser is a recent Chrome, and my OS is Ubuntu.
My HTML file is index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyPage</title>
</head>
<body>
<p>Blablabla</p>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
The Javascript file is script.js in the same folder:
<script type="text/javascript">
alert('Hey');
</script>
Paths starting with / are absolute paths. If the script and the HTML page are in the same directory, the script's path is simply "script.js":
<script type="text/javascript" src="script.js"></script>
<!-- Here --------------------------^ -->
If the file is in the same folder remove the "/" from script.js
<script type="text/javascript" src="script.js"></script>
Also if the js file has the script tags remove them.
If you want the alert when the doc is ready, consider doing something like:
document.addEventListener("DOMContentLoaded", function(event) {
alert('Hey')
});
I think that the script in the file dosen't need this script tag
<script type="text/javascript">
alert('Hey');
</script>
you can make like this
alert('hey');
just that try out and check if the file path in html to the js file is the right one.
Hi you don't need the script tags in the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyPage</title>
</head>
<body>
<p>Blablabla</p>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
The Javascript file is script.js in the same folder:
alert('Hey');
I have solve this problem by using Visual Studio. Just open the html file in VS and then run this file from here. It will connect your js file to html.

.sh add html5 template to created file

I am in the process of creating a shell script .sh.
I now need to create a html file and add the html of a whole html5 template and same it.
So...
sh myshfile.sh
touch index.html
...Add the html of a html5 template
For example...create a html file and add this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
...via a shell script.
How do I do this?
You could use one of the following methods.
If the content of the template is stored in a file,
cat template.html > index.html
If the content is to be stored in the script itself then,
echo "<html><h1>This is a test</h1></html>" > index.html
Don't forget to escape the quotes with \"

JS commands not recognized in an external file

I'm tring to use the command innerHTML to change the text of my HTML code. it works if I put it at the HTML file, but not if I put in an external one.
The one that works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="Monkey">Monkey</p>
<script>
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
</script>
</body>
</html
Output: NoMoreMonkeys
The one that doesn't:
<!DOCTYPE html>
<html>
<head>
<script src="hello.js"></script>
</head>
<body>
<p id="Monkey">Monkey</p>
</body>
</html>
File "hello.js" :
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
Output: Monkey
Can someone help me?
You should include js before end of body,
because if js run before DOM ready, #Monkey did not exist.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="Monkey">Monkey</p>
<script src="hello.js"></script>
</body>
</html>
Or use jquery document ready:
$(document).ready(function() {
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
});
The solution is to manipulate the page, when it is safe to do.
For that add jQuery to your page and let your JS code execute, when thh document is ready.
$( document ).ready(function() {
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
});
or select element with jQuery as well:
$( document ).ready(function() {
$( "#Monkey" ).html("NoMoreMonkeys");
});

How to execute a simple jQuery Program?

i have created a simple jQuery program.i am new to jQuery technology..please provide me where am i wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script type="text/javascript" src="jquery-1.4.2.min.js">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
</head>
<body>
<p> i m here hid me</p>
<!-- Insert your content here -->
</body>
</html>
The script you've written isn't supposed to go inside the jquery script tag. It needs to go in its own one.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
The first one is to load jquery itself - it's like saying "instead of me writing some javascript here, load it from this file instead", the second one is for your own code since you've put code between the script tags.
A script element can have one script. That script can go between the start tag and the end tag or it can go in another file and be referenced with a src attribute.
If there is a src attribute, then the content of the element will be ignored.
If you want two scripts, then you need two script elements.
<script src="jquery.js"></script>
<script>
// Your code
</script>
Example: Jsdiffle
This is a example with last library of Jquery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("jQuery tutorial for beginners Example");
});
</script>
</head>
<body>
<p> i m here hid me</p>
<!-- Insert your content here -->
</body>
</html>

write some html and js to a iframe,not working in IE:$ is not defined?

I write some html and js to a iframe,not working in IE7/8/9,the error message is:$ is not defined?
My code is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload=function(){
var data='<html>\
<head>\
<meta charset="utf-8">\
<title>Demo</title>\
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><\/script>\
<script type="text/javascript">\
$(function(){\
alert("abc");\
});\
<\/script>\
<\/head>\
<body>\
</body>\
</html>';
window.frames["code_result"].document.open();
window.frames["code_result"].document.write(data);
window.frames["code_result"].document.close();
}
</script>
</head>
<body>
<iframe id="code_result" frameborder="0" class="frame_result" name="code_result"></iframe>
</body>
</html>
who can tell me why?thanks
update
this error only show in IE78/9,it work well in Chrome and FireFox
It's not the code loading the I frame content. It's ie's loading order. Simply wrap your I frame script in a window onload function so it allows jquery to load first. Tested and working in ie.
Add:
$(document).ready({
alert('123');
});
You will need it load jquery in the I frame before running code. JQuery hasn't loaded yet.

Categories