How to read the JavaScript source code in an html page - javascript

Is there a way that a JavaScript function can read the JavaScript source code of other functions in an html page, so that the function can do some checking job on the javascript source code of these other functions?
Maybe a walkabout is how to get the source code of all JavaScript functions in an HTML page.

If you want to see the source of a function, you can use the toSource() function:
function x(a) {
return a + 1;
}
console.log(x.toSource());
// "function x(a) {
// return a + 1;
// }"
I'm not sure about how you'd read the source outside of a function, or even why you'd particularly want to do this.

If you want the entire script tag try the following:
<html>
<head><title>Testing</title></head>
<body>
This is body text.
<input type="button" onClick="javascript:readScript()" value="Read it!" />
<script type="text/javascript" id="myscript">
function readScript(){
var html = document.getElementById("myscript").innerHTML;
alert(html);
}
</script>
</body>
</html>

Related

How to put HTML inside of a jquery or javascript function to to be appended later?

Sorry there might be an answer somewhere out there, but I was having trouble finding it as well as trying to do it myself. But I was wondering if I could get an example of putting HTML inside of a jQuery function as well as a javascript function so that I can use it later to append to DOMs.
HTML
<div class="container>
</div>
jQuery
$(function (nothing){
'<h3>Nothing Here</h3>'
});
$(".container").append(function(nothing));
RESULT
Nothing Here
I am an even bigger noob with javascript, but I'd like to achieve the same result. Can someone show me how? Also, is there a difference in using the javascript method VS the jQuery method? thanks!
Javascript answer:
domElement.innerHTML is the API to add any html content inside the domElement.
And the html content can be returned from the javascript function in string format.
<!DOCTYPE html>
<html>
<body>
<div id="container">
</div>
<script> function getHTMLContent() {
return "<h2>Nothing here</h2>";
}</script>
<script>
document.getElementById("container").innerHTML = getHTMLContent();
</script>
</body>
</html>
Jquery answer: Instead of .innerHTML we have .append in jquery. This also takes string as parameter. And there is no difference in the way we call the javascript function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function getHTMLContent() {
return "<h2>Nothing here</h2>";
}
$("#container").append(getHTMLContent());
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
And regarding your doubt on function() and $function()..
$(function() { ... });
is just jQuery short-hand for
$(document).ready(function() { ... });
It gets called automatically once the page is ready.
But in javascript when you declare function(), this is not called by itself. You have to explicitly call it.
function nothing(){
$(".container").append('nothing');
}

How to process Iframe javascript functioncall

I found out javascript function call in iframe is transmitted to view.py or url.py ... therefore if function is not defined in parent page.. it shows "function is undefined...."
How can I process javascript function call in its own javascript function.
the result of explorer is "date function is undefined..."
Thnks in advance.
ref.
destiframe.find('head').append("<style></style>");
destiframe.find('body').append('<script type="text/javascript"></script>');
//attach customized code
jQuery.each( code, function( i, code ) {
switch(i){
...
case 2:
destiframe.find('script').append(code.value);
and.
Assuming that below is customized html code.
<html>
<head>
<style>
</style>
</head>
<body>
<script type="text/javascript">
function date(){
document.getElementById('demo').innerHTML = Date();
}
</script>
<h2>My First JavaScript</h2>
<button onclick="date()" type="button">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Result is
Undefined function date().
I found out that premise("javascript function call in iframe is transmitted to view.py or url.py..") is not correct. javascript function call in iframe is transmitted to source code which document is referring. therefore iframe should refer src code.
It is implemented by defining src attibute in iframe. if you want to know how to implement see below QnA
It doesn't work (html and javascript and Iframe)

HTML will not execute JavaScript functions

I am trying to get a very simple javascript project going, but I cannot get any function to execute. Here is a simple example. It is obviously just an example. I have tried everything I can think of to get the browser to recognize that I am trying to call a function that has been defined, but it never does anything but just display the text, rather than call anything. In the below example, I simply get a page with the text: "varTimesTwo(3);"
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
</script>
varTimesTwo(3);
</body>
</html>
your code is wrong, you have to place varTimesTwo(3); inside the script tag, like this:
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
varTimesTwo(3);
</script>
</body>
</html>
Keep all JavaScript code in the script tags, or better yet, in a file
separate from the html file using <script src="myjsfile.js"></script>
You can use document.write(string) to write a string to the document.
This string is treated as HTML so you need to use <p>text</p> or <br> to get line breaks.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
document.write("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
Alternatively, you can use window.alert(string) or simply alert(string) to pop up an alert box. But if you have turned off pop-ups in the browser, these will not pop up.
<!DOCtype html>
<html>
<body>
<script>
function varTimesTwo(oneVar){
return (oneVar * 2)
}
alert("3 times two is "+varTimesTwo(3));
</script>
</body>
</html>
console.log(string) writes to the debugging console, which you can see on many browsers with either control-shift-J or F12.
The javascript debugging console is also useful for learning javascript without messing with input and output. Anything you type in the JS console is immediately executed, so you can define functions there and play with them without having to write additional code to write the output or read input.
Finally, these techniques are insufficient for most websites as they are actually used. Instead, what is done is to define an html container element and change the text or html that is inside. jQuery provides a browser-independent method of manipulating the document to change items on the page.

Calling an alert function from a button but without using onclick

What im trying to do, is to call my function from whenever someone clicks on my button. However, i know that it can be done with
<button onclick="myFuntion()>
But i want to skip that step, i dont want a function in my button, i've heard that its bad programming.
However, heres how my file looks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javacript" src="javascript.js"> </script>
<title> Javascript </title>
<script>
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
alert("Hello");
}
</script>
</head>
<body>
<button type="button" id="test" <!-- I know i can use onclick="testFunction()" here but i dont wanna !-->> Click me </button>
</body>
</html>
So how come it doesnt pop-up with the box "Hello" whenever i push the button, what have I done wrong?
You have to call your testFunction after the HTML body is loaded so that it actually creates he binding.
That is, at the end of the file, you'd do something like:
...
<script>
testFunction()
</script>
</body>
...
If you run that binding code in your head script the button element won't exist yet — that is why this have to be at the end.
JavaScript libraries such as jQuery make this more elegant by providing an ready hook, where one puts code to be called once the page is fully loaded, without having to resort to code on the bottom of the page.
Complete example with script at end (confusingly, Stack Snippets don't show it to you in the order they actually are in the snippet; even though it doesn't look like it, the script is at the end here):
// Scoping function to avoid creating unnecessary globals
(function() {
// The click handler
function Hello() {
alert("Hello");
}
// Hooking it up -- you *can* do it like you did:
//document.getElementById("test").onclick = Hello;
// ...but the modern way is to use addEventListener,
// which allows for more than one handler:
document.getElementById("test").addEventListener(
"click", Hello, false
);
})();
<button type="button" id="test">Click me</button>
window.onload=testFunction;
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
alert("Hello");
}
Just run the line in your testFunction always. As seen here:
https://jsfiddle.net/arugco4b/

Getting entire HTML in JavaScript

I'm trying to get the entire HTML of a page, but it seems that the text stops after </head>. The following code is essentially how I tested this. What am I doing incorrectly here?
<html>
<head>
<script>
document.onload = showHTML();
function showHTML() {
html = document.documentElement.innerHTML;
alert(html);
}
</script>
</head>
<body>
<p> This is absolutely useless text. </p>
</body>
</html>
Okay here is a complete working answer... after checking already posted answer I realized it didn't work for multiple reasons..
First you need to put a function in the onload event. The onload event is written without uppercases.
Also! you need to put the event on the window object as such:
window.onload = showHTML;
Here is a fiddle. Notice on the left that it isn't wrapped inside onload. It's unwrapped in head like your code should be.
http://jsfiddle.net/4zsGH/2/
You should have something like this:
<html>
<head>
<script>
window.onload = showHTML;
function showHTML() {
var html = document.documentElement.outerHTML;
alert(html);
}
</script>
</head>
<body>
<p> This is absolutely useless text. </p>
</body>
</html>
Take off the parenthesis from document.onLoad = showHTML();
What's happening is showHTML() is being called right away, before the rest of the document is being loaded. Taking off the parenthesis means the function is being set to the onLoad callback.
Try:
<html>
<head>
<script>
document.onload = showHTML;
function showHTML() {
var html = document.documentElement.outerHTML;
alert(html);
}
</script>
</head>
<body>
<p> This is absolutely useless text. </p>
</body>
</html>
When you wrote document.onLoad = showHTML(); you didn't assign the reference to showHTML function to document.onLoad but you assigned the value returned by that function i.e. undefined (because you called it). I also changed innerHTML to outerHTML.
Also document.onload shouldn't be written in camel case.
Writing var html = … isn't essential but it wouldn't run in strict mode. Without it you create a html property on global object window implicitly.
I think this is what you are looking for:
document.onLoad = showHTML();
function showHTML() {
var html = document.documentElement.innerHTML;
alert(html);
}
http://jsfiddle.net/skhan/4zsGH/

Categories

Resources