So we can do:
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
//my_window.document.write('somehow add JS');
my_window.document.write('<h1>Popup Test!</h1><br/>');
my_window.document.write('J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha} ');
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
but how to for example add to header of that html page with something like <script type="text/javascript" src="path-to-MathJax/MathJax.js"></script> to enable MathML and tex formulas rendering?
Yep, you just need to concatenate the script tags, like so: jsfiddle demo
The money-shot code sample is:
jswin = window.open("", "jswin", "width=350,height=150");
jswin.document.write("Here's your popup!");
jswin.document.write('<scr'+'ipt>alert("Here\'s your alert()!");</scr'+'ipt>');
Use javascript to create a node named script, and sets it's attributes with javascript. Then append the node to document.head.
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
var my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
var head = my_window.document.getElementsByTagName("head").item(0);
alert(head.innerHTML);
var script = my_window.document.createElement ("script");
script.src = "a.js";
head.appendChild (script);
alert(head.innerHTML);
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
You can consider using an iframe, you can set its head and body altogether, and you can put it in the window.
Related
I've read many tutorials and tried them, but they don't work.
Just for example I wrote this simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script>
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
</script>
</body>
</html>
I get Test Message text in my page.
Then I put my JS code to an external file: '/js/js.js'
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
And modify the HTML file to:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/js.js"></script>
</head>
<body>
<p id="testElement"> Html text</p>
</body>
</html>
When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.
Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
Check the JavaScript error console.
Your code runs before the document is rendered so the node testElemet doesn't exist.
Either move your script-include down as the last element in the body or wrap your code in a load/ready event.
function on_document_ready(callback) {
if (document.readyState === "complete") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
on_document_ready(function () {
var paragraph = document.getElementById("testElemet");
paragraph.innerHTML = "Test Message";
});
This should work fine:
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement">Html text</p>
<script type="text/javascript" src="/js/js.js"></script>
</body>
</html>
Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.
Try this
var doSomething = function()
{
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload = "doSomething();">
<p id="testElement"> Html text</p>
</body>
</html>
Try saving both the files in the same folder.
Make use of your browsers developer console, to determine whether any errors have occurred.
Regarding 'onload', you can have a look at this link.
Here is the the html code:
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body class="- view-form">
<div id="container"> </div>
<script type="text/javascript">
var sub_chart_path = "device";
var is_dependency = false;
var max_zoom_factor = 5;
var image_name_base = "NHCTCC01";
</script>
</body>
</html>
What I want is to locate the element inside the <script type="text/javascript">. Can anybody tell me how it can be located?
You need to use the execute_script with Javascript executor and get the variable in return
driver.execute_script("return sub_chart_path;")
Should print:
device
I have the following code:
<div>
<textarea id="tinyeditor" name="description_evenement"></textarea>
<iframe width="584" height="175">
#document
<html>
<head>
<link href="custom.css" rel="stylesheet"></link>
</head>
<body id="editor" contenteditable="true">
Hello, World!
</body>
</html>
</iframe>
</div>
I need to to fill the textarea with the value "Hello, World!" using JavaScript before submitting. I used the following code, but it's not working:
<script type="text/javascript">
function replace(){
var content = document.getElementById('editor').innerHTML;
document.getElementById("tinyeditor").value = content;
}
</script>
How can I do it?
Try this..
<script type="text/javascript">
function replace(){
var content = document.body.innerHTML;
document.getElementById("tinyeditor").value = content;
}
</script>
It might be because the textarea is in the parent element and the body is in the iframe...give your iframe an id (e.g., myFrame) and try:
var content = document.getElementById('myFrame').contentWindow.document.getElementById('editor').innerHTML;
Everything else would stay the same.
I copied 3 lines of code from Vimeo, and Chrome's javascript debugger says they cause an undefined error. It tries to do a 'split' on an element that does not exist. Here is the 3 lines of script, plus all the html, since its obviously very short. Any help is appreciated.
<!DOCTYPE html >
<html>
<head><meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8" /><title>
</title><link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/sunny/jquery-ui.css" /><link href="/Styles/common.css" rel="stylesheet" type="text/css" />
<script src='/Scripts/utilities.js' type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
var f = $('iframe'),
url = f.attr('src').split('?')[0],
status = $('.status');
</script>
</head>
<body>
<center>
<table><tr><td>
<div id="ContainPlayer" style="position:relative;">
<iframe src="//player.vimeo.com/video/79036140?autoplay=1&api=1"
player_id="vimeoplayer" id="vimeoplayer"
width="1000" height="454"
frameborder="0" ></iframe>
</div> </td>
</tr></table>
</center>
</body>
</html>
This is because you put the javascript before content is loaded, before the page is rendered. Move the script code after the iframe or put the block in a domready event.
$(function(){
var f = $('iframe'),
url = f.attr('src').split('?')[0],
status = $('.status');
});
You have to wrap your code in $(document).ready(function () {});
Either write your code...
$(function() {
here
})
or before the closing body tag.
The problem is that your script is executed before the html is rendered.
I'm trying to create a simple test to modify the content of an iframe from its parent container and to modify the content of the parent container from the iframe. Here's what I have so far:
first.html:
<!doctype html>
<html>
<head>
<title>First</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="first.js"></script>
</head>
<body>
<h1>First</h1>
<iframe src="http://localhost:3000/second.html"></iframe>
</body>
</html>
second.html:
<!doctype html>
<html>
<head>
<title>Second</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>
<body>
<h1>Second</h1>
</body>
</html>
shared.js:
function modifyContent(targetContainerElement, targetSelector, sourceString) {
$(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!");
}
first.js:
$(document).ready(function() {
var iframe = $("iframe");
modifyContent(iframe.contents(), "h1", "First");
});
second.js:
$(document).ready(function() {
if (!top.document)
return;
modifyContent(top.document.body, "h1", "Second");
});
To run the code, I use python -m SimpleHTTPServer 3000 and navigate to localhost:3000/first.html. The first header is modified and says "Modified by Second!" but the second header just says "Second". What am I missing here?
Try changing the h1 tag inside the iframe when it's completely loaded:
$(document).ready(function() {
var iframe = $("iframe");
iframe.load(function ()
{
modifyContent(iframe.contents(), "h1", "First");
});
});
Plus I think you should rewrite modifyContent :
function modifyContent(isJquery, targetContainerElement, targetSelector, sourceString)
{
if ( isJquery )
targetContainerElement.find(targetSelector).html("Modified by " + sourceString + "!");
else
$(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!");
}
just targetContainerElement would work cause you don't really need to wrap it in $() since it's already a jquery object