Even though there are similar questions to mine js open popup window and acces it's element in another page , the solution there didn't work for me ..
I am trying to open a window onclick, and then access a certain element and edit its content , but it's not working..
Here is the parent html
<!doctype html>
<html>
<head>
<title>Parent</title>
<script src="opener.js"></script>
<meta charset="utf-8"/>
</head>
<body>
<button class="w3-btn w3-container" id = "submit_btn">Submit</button>
</body>
</html>
Child html
<!doctype html>
<html>
<head>
<title>Pre:D</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<meta charset="utf-8"/>
</head>
<body>
<input class="w3-input" type="text" id="input_word" placeholder="enter your word here">
<div id="dump" style = "width: 800px"> </div>
</body>
</html>
and here is the opener.js script
window.onload = function(){
document.getElementById("submit_btn").onclick= run;
};
function run(){
var myWindow = window.open('child.html', "width=850,height=600");
myWindow.onload = function() {
myWindow.document.getElementById("dump").innerHTML = 'Janela: ';
}
}
Best
Related
JS:
window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body onload="siteTitle()">
<h1 id="site-title" class="title">Site Title</h1>
<div class="box-container">
<div class="left-box">
a
</div>
<div class="right-box">
<h1 class="title-in">abc</h1>
a
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I have tried changing it multiple times with things I have found from other questions and website but I cannot fix this
The script worked when placed directly in the tag but not when imported
Thank you for your help
The following codes works for me well.
If these codes doesn't work for you, check your browser and update it.
try
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
<script src="main.js"></script>
</head>
<body>
<h1 id="site-title" class="title">Site Title</h1>
<div class="box-container">
<div class="left-box">a</div>
<div class="right-box">
<h1 class="title-in">abc</h1>
a
</div>
</div>
</body>
</html>
with
window.onload = () => {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
Since you're calling the function from <body onload="siteTitle()"> you need to define it with a normal function definition, not by assigning to window.onload.
function siteTitle () {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
Try giving a name to your function like this
window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
because you are giving siteTitle as a function but it is a parameter
I am not sure but it can work for you.
I want to copy an HTML div from external file and save it into other html file by clicking a button and using JavaScript:
<html lang="en">
<head>
<title>Document 1</title>
</head>
<body>
<div class="container1">
<p>text 1</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Document 2</title>
</head>
<body>
<div class="container2">
<p>text 2</p>
</div>
<button>Click here</button>
</body>
</html>
Using vanilla JavaScript:
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page A</title>
</head>
<body>
<div id="target"></div>
<button onclick="loadElement('b.html', 'div#y', 'div#target')">Copy div#y from b.html</button>
<script>
async function loadElement(sourceFileName, sourceSelector, targetSelector) {
// Load the whole <body> of the source HTML file
const response = await fetch(sourceFileName);
const text = await response.text();
const i1 = text.indexOf("<body>");
const i2 = text.indexOf("</body>");
const bodyHTML = text.substring(i1 + "<body>".length, i2);
// Add it to the target element
const targetElement = document.body.querySelector(targetSelector);
targetElement.innerHTML = bodyHTML;
// Keep only the source element
const sourceElement = targetElement.querySelector(sourceSelector);
targetElement.innerHTML = "";
targetElement.append(sourceElement);
}
</script>
</body>
</html>
The file to load the div from:
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page B</title>
</head>
<body>
<div>
<div>
<div id="x">Hello from b.html div#x!</div>
<div id="y">Hello from b.html div#y!</div>
</div>
<div id="z">Hello from b.html div#z!</div>
</div>
</body>
</html>
I tested this by starting a Python web server on Windows (py -m http.server) from the folder of these files, and opening http://localhost:8000/a.html in Chrome. Clicking on the button loads the selected div from b.html.
Use jQuery can solve your problem.
If you want to get div(id = "DivA") content from sampleA.html into your current html div (id= "DivB"). Assume these 2 html files are under same path.
$( "#DivB" ).load( "sampleA.html #DivA" );
I want to change the meta tag content i.e. refresh rate and url dynamically using javascript. Using a button to enable javascript function. Tried 3 alternatives but not working. Please help.
Thanks,Amresh
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag"
content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
<!--document.querySelector('meta[name="description"]').setAttribute("content","5;URL=http://google.co.in");-->
<!--document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");-->
var m = document.createElement('meta');
m.name = 'description';
m.id = 'mymetatag';
m.content = '5;URL=http://google.co.in';
m.HTTP-EQUIV= 'refresh';
document.head.appendChild(m);
}
</script>
This works for me.
The issue could have been that you tried a first code which did not work and you commented the code with HTML comments <!-- [...] -->instead of Javascript comments: // [...] or /** [...] */.
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag" content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");
}
</script>
</body>
</html>
I looks like you misuse the functionality of metatags, JS doesn't save the state between requests. And, BTW, you can do reload/redirect using the javascript itself.
The console doesn't give any error, and the window displays nothing. What is wrong with it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body>
<div id="stuff" onload="stuffify()"></div>
</body>
</html>
The onload function will work when on the body tag of your document.
Also, the condition of your for loop is incorrect, it should be:
for(var a=6; a >= 0; a--)
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body onload="stuffify();">
<div id="stuff" ></div>
</body>
</html>
onload is supported by following tags:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
This explains why stuffify is not triggered after your div is loaded.
So, you can bind the onload function to body instead of div, or insert script after div, like this:
<div id="stuff" ></div>
<script type="text/javascript">
stuffify();
</script>
Could someone help me in updating a div in a htmleditor? Its in an iframe, so I could not do:
Ext.fly('mydiv').update('New value');
Right now I am updating the whole content with:
xtype:'textfield',
listeners:{
keyup:{
fn:function(){
var e = this.up().down('htmleditor');
var v = 'some text <div id='mydiv'></div> some more text'
e.setValue(v);
}
}
},
xtype:'htmleditor',
...
where as I would only like to update the mydiv part only but cannot get reference to it somehow. Thanks.
If I understand correctly, the real question here is "How do I access a DIV inside an IFRAME from its parent document?"
I haven't used EXT JS for anything, so I don't know its syntax. But here it is in basic JavaScript.
First, the document in the IFRAME:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Child Document</title>
</head>
<body>
<h1>Child Document</h1>
<div id="stuff">
This is a div with some text in it.
</div>
</body>
</html>
And then the parent document:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parent Document</title>
<style type="text/css">
#iframe {
width: 250px;
height: 250px;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<h1>Parent Docment</h1>
<form action="" method="get">
<p>
<input type="button" id="get-it" value="Get It" />
</p>
</form>
<iframe src="iframe.html" id="iframe"> </iframe>
<script type="text/javascript">
<!--
function getIt(){
var iframe = document.getElementById("iframe");
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var stuff = innerDoc.getElementById("stuff");
alert(stuff.innerHTML);
}
function init(){
document.getElementById("get-it").onclick = getIt;
}
window.onload = init;
// -->
</script>
</body>
</html>
The key is this:
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
That lets you get access to the document object of the IFRAME, after which you can use it as normal.