How to process Iframe javascript functioncall - javascript

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)

Related

function doesn't implemented since onload()

I am using jsp to render some data and making a test by using the following codes:
<html>
<head>
<title>D3 Demo</title>
</head>
<script language="javascript">
function access(){
alert("entered");
var outputjson = "<%=responseJson%>";
alert(outputjson);
}
</script>
<body onload = "access()">
<h1>This is a Heading</h1>
<p><%=responseJson%></p>
</body>
</html>
From the browser I can tell that the body contains the <h1> and <p> content as This is a Heading and a Java variable, responseJson. But I didn't get any alert pop up. It seems that the access function never get called. But in the body, I do call it so that when the page get loaded, it should pop up 2 alerts.
What's the issue here?
I just find out the problem.
Since the responseJson in Java returns a JSON String contains "", thus the outputjson variable actually has syntax error, which results in that access() method didn't get compiled. That's why in onload, the browser can not find an method called access.
By making such an edition (Using single quote):
var outputjson = '<%=responseJson%>';
It works well. FYI

Loading .js file in <head>

So I am new to javascript (in fact, new to programming in general).
My question is, can I consider loading the .js file in the
<head><script src="script.js"></script>...</head>
as loading a header file (like in c/c++)?
I guess not. Suppose my script.js looks like this:
function copyToClipboard(text)
{window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}
and my index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script> onclick=copyToClipboard(document.getElementById("a").value);
</script>
</body>
</html>
It does not work, namely, it does not wait for my clicking (which means that the function is loaded correctly-it is called successfully, it is just that the pop-up does not wait for the mouse event). But if I put the script in-line, it works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script>onclick=function copyToClipboard(text) {
window.prompt("Copy to clipboard:Ctrl+C,Enter",document.getElementById("a").value);
}
</script>
</body>
</html>
The reason why the first code doesn't work is that you're calling the copyToClipboard() function and assigning the return value to the onclick variable. In the second code you're correctly assigning it a function reference instead of calling the function immediately.
In other words:
onclick = copyToClipboard(document.getElementById("a").value);
"Call copyToClipboard(), assign return value (undefined) to the onclick variable"
onclick = function copyToClipboard(text) { ...
"Assign a reference to a function called copyToClipboard() to the onclick variable"
To make it work with the function definition in an external script, wrap the function call in an anonymous function:
onclick = function() {
copyToClipboard(document.getElementById("a").value);
};
All praise the power of javascript to mislead developers into diagnosing their problems incorrectly!
This is not how you define an inline onclick handler. An inline onclick handler is an attribute(or property, as we'll find out in a bit) of an html element:
<textarea id="a" autofocus="true" onclick="copyToClipboard(this.textContent)"></textarea>
What you did with the <script> tag was simply include some javascript code, to be executed as the browser is parsing your html:
<script> onclick=copyToClipboard(document.getElementById("a").value);</script> calls your function, and assigns its return value to onclick.
But wait, why does your second snippet work?
This is because onclick is also a property of dom elements. It also happens that you can assign a click handler to window itself - this is what your second snippet is actually doing(thanks to an uncool feature of javascript that attempts to assign to an undefined variable assigns to properties of the global object). That means that no matter where you click, your new click handler will be called.
As to your opening question, you can't really say that tags are like includes - a script can involve more than just declarations and definitions, unlike an included file. You can look into some of the module standards/frameworks, like RequireJS, for more similar functionality.

Why javascript doesnt get element by id when that element is below script tag?

I'm learning javascript and studying this example:
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
My question is why doesn't the script work properly when the line with <p id="p1">Hello World!</p> is below the script, and what happens during its execution? Thank you.
Because the JavaScript is run when the browser encounters it, when compiling/rendering the page; not once it's finished rendering the page. So, if the element appears after the script it doesn't (yet) exist at the point at which the JavaScript is run.
You could, though, create a function and have that function run once an element has loaded, for example:
<script>
function bodyLoaded(){
document.getElementById('p1').innerHTML = 'New text!';
}
</script>
<body onload="bodyLoaded()">
<!-- HTML here... -->
<p id="p1"></p>
</body>
Javascript is an interpreted language. 'interpreted' means that it:
"executes instructions directly, without previously compiling a
program into machine-language instructions"
Hence because the javascript interpreter executes instructions on the page line by line (starting from the top of the page), the order in which code is defined is crucial. So in your example the paragraph element has to be defined before your call to getElementById.
Elements must be defined in order for JavaScript to recognize them. If you chose to put your JavaScript inside the <head> tag, then you can do this with the window.onload event. This can be done several ways.
//Obtrusive JavaScript
<html>
<head>
<script>
function loadMe(){
var doc = document;
function E(e){
return doc.getElementById(e);
}
E('p1').innerHTML = 'New text!';
}
</script>
</head>
<body onload='loadMe'>
<p id='p1'>Hello World!</p>
</body>
</html>
/* Unobtrusive JavaScript ---> the way you should learn it in my opinion
Notice there's no onload attribute in the body tag. Also, I use onload
instead of window.onload, because window is implicit, just as document
is a property of window as well.
*/
<html>
<head>
<script>
onload = function(){
var doc = document;
function E(e){
return doc.getElementById(e);
}
E('p1').innerHTML = 'New text!';
}
</script>
</head>
<body>
<p id='p1'>Hello World!</p>
</body>
</html>
Of course, you should use external JavaScript whenever possible.

Calling JavaScript function loaded from remote file

I am just getting started with HTML/JavaScript, and I have a simple question. I am attempting to call a js function from a separate script source, but am having a bit of trouble. My function script (date_button_function.js) reads:
function displayDate()
{
document.getElementById("date").innerHTML=Date();
}
In order to call on this function, my code looks like this:
<html>
<head>
<script type="text/javascript" src="date_button_functoin.js"></script>
<body>
<h1>Testing the Date</h1>
<p id="date">Click below to see the date.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
When I actually write out the displayDate function in the HTML script, it runs just fine. However, when calling the function, it does not work. If someone could let me know my syntax error, that would be great.
You're not closing your head tag, that's probably your issue there. Also, as stated on the comments, the name of the js file is wrong, should read "date_button_function.js" instead of "date_button_functoin.js"

How to read the JavaScript source code in an html page

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>

Categories

Resources