I have an existing HTML file as follows-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="chatWindow.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Chat Window</title>
</head>
<body>
<table>
<tr> <textarea id="chatTextArea" rows="20" cols = "80"></textarea> </tr>
<tr> <textarea id="messageTextArea" rows="5" cols="80"></textarea> </tr>
</table>
<script type="text/javascript" src ="jquery-1.7.1.js" ></script>
<script type="text/javascript" src="liveChat.js"></script>
</body>
</html>
I open this HTML in a new window from JavaScript code as follows -
var chatWindow = window.open("chatWindow.html", "Chat Window", "resizable=0,width=700,height=600");
Now, to this existing window, I want to add another field. I tried -
var chatWindow = window.open("chatWindow.html", "Chat Window", "resizable=0,width=700,height=600");
chatWindow.document.write(' Hey!! <input type="hidden" id="currentUserName" value="' + userName+ '" / > ');
But this overrode the existing HTML and so all I saw on my page was "Hey!!".
I also tried
var chatWindow = window.open("chatWindow.html", "Chat Window", "resizable=0,width=700,height=600");
var hiddenNode = chatWindow.document.createElement('input');
hiddenNode.setAttribute("type", "hidden");
hiddenNode.setAttribute("id", "currentUserName");
hiddenNode.setAttribute("value", userName);
chatWindow.document.body.appendChild(hiddenNode);
But this had no affect. When the new window opened, I checked its page source and the hidden node was not found. How to solve this problem? Please help.
You should use appendChild.
chatWindow.document.appendChild(document.createTextNode("Hey !"));
You may also use jQuery to do this more easily.
Try to assign properties instead of attributes.
chatWindow = window.open("chatWindow.html"...);
hiddenNode=chatWindow.document.body.appendChild(chatWindow.document.createElement('INPUT'));
hiddenNode.type='hidden';
hiddenNode.id='currentUserName';
hiddenNode.value=userName;
Edited:
If the browser opens the window in a new tab, it is accessible as well through chatWindow.
(Succesfully tested with Chrome, FF and IE.)
Try chatWindow.document.body.appendChild(/* [...] */);.
Related
I wrote javascript codes.
By clicking the button, the child window pops up and displays a text sent from the parent window using a postMessage function.
My code could sent a text to the child window, but there's no text displayed.
The text is displayed only when I keep clicking the button. I don't want the text to disappear.
I think my code is overridden by a blank script or something, though I don't write any other codes except for below.
Do you have any solution for this?
the parent window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
</head>
<body>
<input type="button" value="TEST_BUTTON" id="testButton">
<script>
var testButton = document.getElementById('testButton');
testButton.addEventListener('click', function(event) {
event.preventDefault();
var newWindow = window.open('./child_window.html', 'popupWindow', 'width=400,height=300');
newWindow.postMessage('this is a content from the parent window.', '*');
return false;
},false);
</script>
</body>
</html>
the child window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pop Up Window</title>
</head>
<body>
<h1 id="mainText"></h1>
<script type="text/javascript">
var mainText = document.getElementById('mainText');
window.addEventListener('message', function(event) {
console.log(event.data);
this.mainText.innerText = event.data;
}, false)
</script>
</body>
</html>
I ended this up using localStorage instead.
I have two links in a corporate intranet site, built in Sharepoint, that I need to link to Firefox. The links are to an external site that does not work in I.E. However, the corporate browser is I.E., so that's what most people see.
I found the below code that works when I have one link. How do I get it to work for two links?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>HTA Test</title>
<hta:application applicationname="HTA Test" scroll="yes" singleinstance="yes">
<script type="text/javascript">
function openURL()
{
var shell = new ActiveXObject("WScript.Shell");
shell.run("http://www.google.com");
}
</script>
</head>
<body>
<input type="button" onclick="openURL()" value="Open Google">
</body>
</html>
You can modify your script to something like:
<script type="text/javascript">
function openURL(url)
{
var shell = new ActiveXObject("WScript.Shell");
shell.run(url);
}
</script>
</head>
<body>
<input type="button" onclick="openURL('http://www.google.com')" value="Open Google">
<input type="button" onclick="openURL('http://www.yahoo.com')" value="Open Yahoo">
This code runs immediately once the page is loaded. The onclick event is completely ignored by javascript. What is an easy fix for this because like youtube when you play a video the document.title is updated with a speaker. I want to learn to do that with external javascript because I can do it with internal javascript in the html.
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="animationcss.css">
</head>
<body>
<script src="animation.js"></script>
<input id="changeButton" type="button" value="Change" ></input>
/External Javascript/
var element = document.getElementById("changeButton");
element.onclick = textChange("changetothis");
function textChange(text){
document.title = text;
}
try calling the function after the document is loaded by placing the script tag below the object or making $(document).ready() function,
this code works fine with me
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
</head>
<body>
<input id="changeButton" type="button" value="Change" ></input>
<script src="script.js"></script>
<body>
</html>
and the script is
var el = document.getElementById("changeButton");
el.onclick = function(){
textChange("changetothis");
}
function textChange(text){
document.title = text;
}
You can achieve your desired effect by using an anonymous function, like so:
document.getElementById("changeButton").onclick = function () {
document.title = newTitle;
}
The variable 'newTitle' should be declared & initalized above this code somewhere in order for it to work.
I have a form on main page, by pressing a specific button on it - new window() opens with a table in it, and by double clicking the line in the table it should transfer data from table into input fields of my form, but it doesn't.
But if i run everything from one page it works fine.
So how should i modify my code so it can transfer data from new window
Main page:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<button type="button" onclick="NewWindow()">Banks</button>
<br /><br />
Bank Name:
<br />
<textarea id='bank' cols=56 rows=6></textarea>
Bank Adress:
<br />
<textarea id='bic' cols=56 rows=6></textarea>
<script>
var textarea_bank = document.getElementById('bank'),
textarea_bic = document.getElementById('bic');
function comm(obj) {
textarea_bank.value = obj.cells[0].innerHTML;
textarea_bic.value = obj.cells[1].innerHTML;
}
function NewWindow()
{
myChildWin = window.open("test.html", "_blank", "toolbar=no, scrollbars=no, resizable=no, top=100, left=100, width=600, height=600");
}
</script>
</body>
</html>
Window with table(test.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<table id="mySuperTBL">
<tr>
<td><b>BankName</b>
</td>
<td><b>BIC</b>
</td>
</tr>
<tr id='1' ondblclick='comm(this)'>
<td>Bank</td>
<td>Adress</td>
</tr>
</table>
</body>
</html>
Very simple, You should create two files. the second one is "stam.html" (this will be the child window):
Editing - bi-directional communication :-)
for the example the file will open itself (keep this file as "stam.html"). If this the parent, it will set the message to the child. else - it will set text to the parent.
<!DOCTYPE html>
<html>
<head>
<title>Bla!</title>
<script type='text/javascript'>
var m_ChildWindow = null; //
function OpenChildWIndow() {
m_ChildWindow = window.open ("stam.html");
}
function SetDataToChild(data) {
if (m_ChildWindow) {
m_ChildWindow.document.getElementById('body').innerHTML += "Dear son:" + data;
} else {
opener.document.getElementById('body').innerHTML += "Dear Daddy:" + data;
}
}
function Init() {
var button = document.getElementById('cmdSendMsg');
if (opener) {
button.innerHTML = "send message to daddy";
}
}
</script>
</head>
<body id='body' onload = "Init();">
<button onclick='OpenChildWIndow();'>Click to open child</button>
<br>
<button onclick='SetDataToChild("Hello <br>");' id='cmdSendMsg'>Click to add data to child</button>
</body>
</html>
Here you have two buttons. the first will open the new window, the second one will add "hello" to it.
You should use query string, the below code shows how you can send an id of value 1 to the test.html
function NewWindow()
{
myChildWin = window.open("test.html?id=1", "_blank", "toolbar=no, scrollbars=no, resizable=no, top=100, left=100, width=600, height=600");
}
I am creating some JSON on the fly, serializing it and saving it to the DB.
To run it, i create a script element, and load it that way.
Is there a way to load the script source to a textarea?
You don't "run" JSON, JSON is a data notation.
Yes, you can put the text of a script tag into a text area, something along these lines:
var script, tb, node;
script = document.getElementById('theScriptID');
tb = document.getElementById('theTextBoxID');
tb.innerHTML = script.innerHTML;
Example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script id='theScriptID' type='text/javascript'>
function go() {
var script, tb;
script = document.getElementById('theScriptID');
tb = document.getElementById('theTextBoxID');
tb.innerHTML = script.innerHTML;
}
</script>
</head>
<body>
<textarea id='theTextBoxID' rows='20' cols='70'></textarea>
<input type='button' id='btnGo' value='Go' onclick="return go();">
</body>
</html>