I would like to make a button on a page that can call a JS function in the same page. The function will need to create (open) new window which its HTML code was given from the JS function itself. How can I do that?
The purpose of this is to produce a print friendly page out of a specific page.
Please notice: No AJAX can be used.
var opened = window.open("");
opened.document.write("<html><head><title>MyTitle</title></head><body>test</body></html>");
var w = window.open("");
w.document.writeln("<the html you wanted to write>")
function fu() {
var opened = window.open("");
opened.document.write("Your HTML here");
}
<textarea id="code" placeholder="Put code here!" width="500" height="500">
<DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html></textarea>
<input id="width" placeholder="width">
<input id = "height" placeholder="height">
<button onClick="open();">Open the window!</button>
<button onClick="write();">Apply the html to the window</button>
<button onClick = "resize();">Resize the window!</button>
<script>
var win;
function open(){
win = window.open("", "", "");
win.resizeTo(screen.width, screen.height);
}
function resize(){
win.resizeTo(eval(document.getElementById("width")), eval(document.getElementById("height")))
}
function write(){
win.document.write(document.getElementByid("code").value);
}
</script>
Here you can input things and change the window. Hope you enjoy! :)
Related
I was working on variables and loop frames and stumbled across this problem. I tried switching some things around but none have succeeded. I put the code in a validator and it showed the document as valid.
Whats missing?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value
if (myValue.length == 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<input type="submit" value="Click Me" onclick="substitute" />
</body>
</html>
Mentioning the name of a variable holding a function doesn't call the function. You have to actually call it explicitly.
This is usually done by placing () after the reference to the function.
onclick="substitute()"
Code inside iframe is loaded on windows load. However, contents of body loads after button click. And div with id="headers" is hidden but shown on another link click.
What I want is to access and alert Some Id on click search button.
How can I achieve this using Javascript or jQuery?
JSFiddle
Here is my Html code:
<html>
<head>
<title>TODO</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="btn">
<button id="btn-search">Search</button>
</div>
<div class="iframebox">
<iframe id="messageiframe" srcdoc='
#document
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body class="full-height">
<div id="preview">
<ul id="list">
<li class="mail">Gmail</li>
<li class="search">Google</li>
<li class="mail">Outlook</li>
<li class="search">Bing</li>
</ul>
</div>
<div id="all" style= "display: none;">
<div id="headers">
<font class="bold">Path</font>
"Some path"
<br>
<font class="bold">doc Id</font>
"Some Id"
<br>
<font class="bold">Recieved</font>
"Me"
</div>
</div>
</body>
</html>'>
</iframe>
</div>
</body>
</html>
Here is my Javascript code which is incomplete:
$('#btn-search').on('click', function() {
// slight delay
setTimeout(function(){
var links = [];
var iframe = document.getElementById('messageiframe');
iframe.contentWindow.onload = function(){
var innerDoc = iframe.contentWindow.document;
};
},100);
});
Any help is appreciated. Thanks in advance.
I updated your fiddle here: https://jsfiddle.net/qLrohftb/1/
I modified your code slightly by removing the onload method is unnecessary. To get the inner document I modified your code to do this :
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
then once you have the document all you have to do is use innerDoc.getElementById or innerDoc.getElementByClassName or whichever method you want to use to retrieve the value from within the iframe. So in the example I get the element with className mail :
var element = innerDoc.getElementsByClassName("mail")[0];
Then once I have the element I show the alert dialog.
This is what you want? updated fiddle
$('#btn-search').on('click', function() {
// slight delay
a= $('#messageiframe').contents().find('#headers ').find('font:eq(1)')[0].nextSibling.nodeValue
alert(a)
setTimeout(function(){
var links = [];
var iframe = document.getElementById('messageiframe');
iframe.contentWindow.onload = function(){
var innerDoc = iframe.contentWindow.document;
};
},100);
});
Below is a function that I have been trying to call to set focus on a text box, but it is not doing so. I would be thankful if anyone can tell me how to do this.
Thanks in advance :)
address1 is the id of the text box.
function address_validation(address1)
{
document.getElementById("address1").focus();
return false;
}
You are using "address1" than address1.
Your are supposing to get element by using dynamic id address1 but you have used static one "address1".
function address_validation(address1){
document.getElementById(address1).focus();
return false;
}
<html>
<head>
<style>
#txt:focus{
background:black;
}
</style>
</head>
<body>
<input type="text" id="txt"><BR>
<input type="button" onclick="btn()" value="set focus">
<script>
function btn(){
var txt = document.getElementById("txt");
txt.focus();
return false;
};
</script>
</body>
I am trying to pass some data from parent window to pop up window in html.
Below is my code-
<html>
<head>
<script type="text/javascript">
function init()
{
popupWin = window.open('','popupWin','');
popupWin.document.writeln('<html><head><title>test</title></head><body><form><input type="text" id="popupTextBox"/></form></body></html>');
popupWin.document.close();
popupText = popupWin.document.getElementById("popupTextBox");
parentText = document.getElementById("parentTextBox");
}
function transferText()
{
popupText.value = parentText.value
}
</script>
</head>
<body>
<input type="text" id="parentTextBox"/>
<input type="button" onclick="init();"/>
</body>
</html>
But somehow I am not able to pass that textbox data to popup window with the above code. Is there any problem with this?
In general, I am trying to pass some data from parent window to popup window.
You forgot to call transferText()
After calling transferText() the text was transferred...
<html>
<head>
<script type="text/javascript">
function init()
{
popupWin = window.open('','popupWin','');
popupWin.document.writeln('<html><head><title>test</title></head><body><form><input type="text" id="popupTextBox"/></form></body></html>');
popupWin.document.close();
popupText = popupWin.document.getElementById("popupTextBox");
parentText = document.getElementById("parentTextBox");
transferText();
}
function transferText()
{
popupText.value = parentText.value
}
</script>
</head>
<body>
<input type="text" id="parentTextBox"/>
<input type="button" onclick="init();"/>
</body>
</html>
I am new to Javascript. I am facing a problem with global variables. I can't figure out that why the global variables are not working as the code looks ok. Please Help me solve this problem.
I will breifly explain the code first.I have some text on a page which changes to text field when clicked. When I define the variables inside the functions body the code starts working fine. When these variables are defined globally as in the following code, the console displays this error: the variable is not defined. Here my code:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
</body>
</html>
Please Help!
Thanks in Advance.
As Adam said, the issue is that you are running javascript on the document before the document has been loaded. There are a number of ways to fix this, but the simplest is to just move your javascript code to the end of the body so the document has already been parsed and is ready before your code runs like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</body>
</html>
The error is likely caused by grabbing DOM nodes before they're ready:
var textNode = document.getElementById('text');
This is likely returning either null or undefined since that DOM element hasn't been created yet.
Putting this script at the end of your body should solve your problem.
Or, if you'd like to use jQuery, you can do all this in
$(document).ready(function() {
var textNode = document.getElementById('text');
}