For example in page1.html I have:
<input type="radio" id="id1" onclick="change()">Radio Button</input>
In page2.html I have :
Link
Clicking the radio button on page1.html should change the value of the href attribute in page2.html.
Javascript (js_file.js):
function change()
{
if(document.getElementById(id1).checked)
{
document.getElementById(id2).href="page4.html";
}
}
This code will not work since id1 and id2 do not exist on the same page.
Is there any method where 2 or more html pages can simultaneously access a javascript function?
Assuming I have included this :
<script src="js_file.js" type="text/javascript" />
in both the HTML pages within the head tag.
I am trying to avoid server side programming as it is an embedded web server and can only be programmed in C language.
Try this on for size.
Page1.html
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
var urlRadios = document.getElementsByName('urlSelector');
var i, n = urlRadios.length;
for (i=0; i<n; i++)
urlRadios[i].addEventListener('click', onUrlRadioChange, false);
}
function onUrlRadioChange(evt)
{
localStorage.destUrl = this.getAttribute('dest');
localStorage.destTxt = this.getAttribute('msg');
}
</script>
<style>
</style>
</head>
<body>
<h3>Pick destination of link on page 2</h3>
<input type='radio' msg='No page selected' dest='none' checked name='urlSelector'>none</input>
<input type='radio' msg='Page 3' dest='page3.html' name='urlSelector'>page3.html</input>
<input type='radio' msg='Page 4' dest='page4.html' name='urlSelector'>page4.html</input>
<hr>
<a href='page2.html'>Page 2</a>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
if (localStorage.destUrl != 'none')
byId('tgtLink').href = localStorage.destUrl;
byId('tgtLink').innerHTML = localStorage.destTxt;
}
</script>
<style>
</style>
</head>
<body>
<h3>Destination was set by page 1</h3>
<a id='tgtLink'>Link</a>
</body>
</html>
The only way that you can do this is by passing data between pages using hidden HTML elements.
Page1
<input type="radio" name="radio1" id="radio1" onclick="change.js">Radio Button</input>
Page2
<input type="hidden" name="radio1" value="XXX">
Of course, you'll have to have Page1 upload the form to the server, and have the server generate Page2 with the hidden elements populated.
Another solution which might work if the structure of the sites allow this: window.opener
Let's say page 1 opens page 2 as a popup (so both windows are kept opened), then you could access everything from page 1 through window.opener.
You can even test this here. Open any link on this site (whithin the domain of stackoverflow, else that would be XSS) in a new window, then open the JavaScript console of that new window and enter: window.opener.document.title = "YAY!"
At least that's an easy way to avoid using local storage etc.
Related
So I'm making my first electron app after a 7 hour js crash course and 1 semester of AP Computer Science Principles so I'm pretty new, so bare with me. Im making a shop script app in electron and I have a preliminary basic UI setup in electron with a main.js file which handles the opening of the app and UI stuff. Now I wanted to make the first content script part of the app that actually does stuff (save.js). Essentially the finished UI will have 4 user input fields and I need to take those inputs from the html input/form and save them as variables, then display them on the screen. My variables will be (link, price range, Brand, Model). From the course I took I tried to use document.getElementById in a variable and then using .textContent in an onclick function, so that when the html button is pressed it displays the user input on a section of the page. It didn't work, so I tried this approach and it still doesn't return the input into the UI. Any help is appreciated.
Here is the save.js:
let displayLink = document.getElementById('loggedLink')
function getVal() {
const val = document.querySelector('input').value;
console.log(val);
displayLink.textContent = (val);
}
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Link</title>
</head>
<body>
<script src="save.js"></script>
<form>
<div>
<label>Enter Item</label>
<input type="text" id="itemEl" autofocus>
</div>
<button onclick="getVal()" type="submit">Add Item</button>
<span id="loggedLink">Consoloe: </span>
</form>
</body>
</html>
change in JS
function getVal() {
let displayLink = document.getElementById('loggedLink')
const val = document.querySelector('input').value;
console.log(val);
displayLink.textContent = 'Consoloe: ' + (val);
}
change in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Link</title>
</head>
<body>
<script src="save.js"></script>
<form>
<div>
<label>Enter Item</label>
<input type="text" id="itemEl" autofocus>
</div>
<button onclick="getVal()" type="button">Add Item</button>
<span id="loggedLink">Consoloe: </span>
</form>
</body>
</html>
Good Afternoon,
I want to set a localStorage to another domain. I used the postMessage function.
Here is the parent page :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var childwin;
const childname = "popup";
function openChild() {
childwin = window.open('Page2.html', childname, 'height=300px, width=500px');
}
function sendMessage(){
let msg={pName : "Bob", pAge: "35"};
// In production, DO NOT use '*', use toe target domain
childwin.postMessage(msg,'*')// childwin is the targetWindow
childwin.focus();
}
</script>
</head>
<body>
<form>
<fieldset>
<input type='button' id='btnopen' value='Open child' onclick='openChild();' />
<input type='button' id='btnSendMsg' value='Send Message' onclick='sendMessage();' />
</fieldset>
</form>
</body>
</html>
Here the children :
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
// Allow window to listen for a postMessage
window.addEventListener("message", (event)=>{
// Normally you would check event.origin
// To verify the targetOrigin matches
// this window's domain
let txt=document.querySelector('#txtMsg');
localStorage.setItem("age", event.data.pAge);
// event.data contains the message sent
txt.value=`Name is ${event.data.pName} Age is ${event.data.pAge}` ;
});
</script>
</head>
<body>
<form>
<h1>Recipient of postMessage</h1>
<fieldset>
<input type='text' id='txtMsg' />
</fieldset>
</form>
</body>
</html>
This works fine but we need 2 buttons. One to open the page, the other to post the message.
If I want to make the two methods openChild();postMessage() in the same button, it does not work.
I think it is because the page2.html is not totally loaded when we call postMessage().
How can we do ?
Best regards.
Christophe.
you can include your script when DOM loads
document.addEventListener('DOMContentLoaded', () => {
//do some functions
})
I have wrote some basic HTML with some CSS and JavaScript. The code asks the user to enter a password and the Javascript verifies the password and alerts the user the required info. This code functions properly on my desktop but as soon as I add the files to my Samsung Tablet only the HTML appears. The code I'm using is as follows. Currently running all files out of same fodler but would like to move main HTML to tablet Home and leav CSS and Javascript in another location but still be referenced.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dowlingcss.css"/>
<title>
Dr. Dowling
</title>
</head>
<body>
<script src="dowlingjs.js"></script>
<img src="parasol.jpg" alt="Parasol Logo" height="250" width="750">
<h1>Welcome Dr. Dowling</h1>
<p>What is the answer?</P>
<form>
<input id="pass">
<button type="button" onclick="myfunction()">Login</button>
</form>
</body>
</html>
Javascript
function myfunction()
{
var x, text;
//Get the value of the input field with id="pass"
x = document.getElementById("pass").value;
var password = x.toLowerCase();
// If x is Not = to fatluke
if (password != "fatluke")
{
alert("incorrect");
}
else {
alert("The CD is in room 125 under the bed");
}
}
Add your code in this block of code for running and check after page load
window.onload = (function () {
// insert your code here
});
also, try with "window.getElementById()", I think it depends on your browser and version of web view on your tablet.
I am using an iFrame in my application. Let me give an example here.
I have main page as
<html>
<head>
<script src='jquery.js'></script>
<script>
function TestFunction()
{
var FirstName = $("#first_name").val();
alert(FirstName);
}
</script>
<head>
<body>
Enter First Name: <input type='text' size='20' id='first_name'><br />
<input type='button' value='Cilck' onclick='TestFunction();'><br />
<iframe id='test_iframe' src='test_iframe.htm' height='200' width='200'>
</iframe>
</body>
</html>
...and this works fine with alerting whatever is entered in textbox
But is it possible to invoke the same function in iframe that will alert the value present in textbox of the parent page?
Suppose test_iframe.htm code is like this
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
TestFunction(); // I know this wont work.. just an example
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
Can this be done ?
I believe this can be done with 'parent'
function IframeFunction()
{
parent.TestFunction();
}
<html>
<head>
<script src='jquery.js'></script>
<script>
function IframeFunction()
{
parent.TestFunction(); // or top.TestFunction()
}
</script>
<head>
<body>
<input type='button' value='Click' onclick='IframeFunction();'>
</body>
</html>
<a onclick="parent.abc();" href="#" >Call Me </a>
See Window.Parent
Returns a reference to the parent of the current window or subframe.
If a window does not have a parent, its parent property is a reference to itself.
When a window is loaded in an , , or , its parent is the window with the element embedding the window.
This answer is taken from stackoverflow
I have a "print" button on index.html. What code do I need to print the print.html file? I mean, when I press the button from index.html, print the page print.html.
function closePrint () {
document.body.removeChild(this.__container__);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.style.visibility = "hidden";
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
Then use
onclick="printPage('print_url');"
I think you're looking for window.print()
Update
Just noticed you've specified file names in there and that you want to print print.html when a button on index.html is clicked. There's no built-in way to do this (in the sense that you can't pass any arguments to window.print() indicating the document to print). What you could do is load the document to print into an iframe or open a new window and on load, invoke window.print() on that container.
Here are some forum posts and web pages that talk about the same thing:
http://www.highdots.com/forums/javascript/printing-another-web-file-present-274201.html
http://www.webmasterworld.com/javascript/3524974.htm
http://www.felgall.com/jstip29.htm
Update 2
Here's some quick-and-dirty code - note that this will only work if both your pages are in the same domain. Additionally, Firefox seems to fire the load event for an empty iframe also - so the print dialog will be displayed immediately on load, even when no src value was set for the iframe.
index.html
<html>
<head>
<title>Index</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#loaderFrame').load(function(){
var w = (this.contentWindow || this.contentDocument.defaultView);
w.print();
});
$('#printerButton').click(function(){
$('#loaderFrame').attr('src', 'print.html');
});
});
</script>
<style>
#loaderFrame{
visibility: hidden;
height: 1px;
width: 1px;
}
</style>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<iframe id="loaderFrame" ></iframe>
</body>
</html>
print.html
<html>
<head>
<title>To Print</title>
</head>
<body>
Lorem Ipsum - this is print.html
</body>
</html>
Update 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome
You can use the JQuery printPage plugin (https://github.com/posabsolute/jQuery-printPage-plugin). This plugin works fine and you can simply print an external html page.
Example:
<html>
<head>
<title>Index</title>
<script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
<script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<input type="button" id="printerButton" name="print" value="Print It" />
<p><a class="btnPrint" href='iframe.html'>Print!</a></p>
</body>
</html>