I have two html files. main.html and test.html. I also have script.js. I have a
with an id “test” in main.html, and
with “tt” as id in test.html. In my script.js, how can I access “tt”, because when I do, nothing happens, but I’m able to access “test”.
I found this on stackoverflow, and this is the same problem I’m facing. Is local storage the best way?
Hi @tonynsx, there seems to be some code missing – HTML will only show here if you format it as code, by selecting the code and clicking the </> button or directly using markdown syntax.
Anyway AFAIK you can only access elements on another page if you have a direct reference to that page, e.g. when you actively open()ed it or if it is embedded as an iframe:
const page = window.open('test.html')
page.addEventListener('DOMContentLoaded', () => {
// Now we can access the #test element on the other page
const testDiv = page.document.getElementById('test')
testDiv.textContent = 'Hello world!'
})
This is main.html with p tag id “test”
<!DOCTYPE html>
<html>
<head>
<title>SCA Checklist</title>
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript" src="/script.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<table class="table table-borderless">
<tr class="title">
<td colspan="2">SCA Warehouse Checklist</td>
</tr>
<tr>
<td class="menu" width="50%" id="menu_table"><img src="icons/home.png"></img><a href="#none" onclick=reset_view()>     Home</a></td>
<td class="right-menu" rowspan="6"><iframe id="data" width="100%" height="100%" src="home.html" scrolling="no"></iframe></td>
</tr>
<tr>
<td class="menu"><img src="icons/aeriallift.png"><a href="#none"></img>     Aerial Lifts</td>
</tr>
<tr>
<td class="menu"><img src="icons/mower.png"></img>     Lawn Equipment</td>
</tr>
<tr>
<td class="menu"><img src="icons/lift.png"></img>     Lift Trucks</td>
</tr>
<tr>
<td class="menu"><img src="icons/Inventory.png"></img>     Inventory</td>
</tr>
<tr>
<td class="menu"><img src="icons/about.png"></img>     <a href="#none" onclick=show_about()>About</a></td>
</tr>
</table>
<div>
<p id="test">This is from main.html</p>
<input type="submit" name="" onclick="dummy()"></input>
<div>
</body>
</html>
This is test.html with p tag “tt”
<html>
<head>
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript" src="/script.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="tt">This is p tag in test.html</p>
</body>
</html>
This is script.js, but it can’t access “tt”
function reset_view(){
document.getElementById("menu_table").width='50%'
document.getElementById("data").innerHTML = "SCA Warehouse Checklist"
document.getElementById("data").src = "home.html"
}
function show_about() {
document.getElementById("menu_table").width='25%'
document.getElementById("data").width='100%'
document.getElementById("data").height='100%'
document.getElementById("data").src = "about.html"
}
function dummy() {
u = document.getElementById("test").innerHTML
f = eel.dummy(u)
showdir()
}
async function showdir() {
t = await eel.showdir()();
document.getElementById("tt").innerHTML = t
document.getElementById("data").src = "test.html"
}
I mostly code in Python, and the ee.dummy(), and eel.showdir() are from Python. Eel is a Python package that accepts javascript, and vice versa.
If I use document.getElementById("test").innerHTML = t it works, but not document.getElementById("tt").innerHTML = t
How can I have script.js find “tt” id
I haven’t tried it yet, but is the local storage best way? I just want to know if there’s anything else that’s easier.
Well document refers to the current document; if you want to access elements inside another document, you first need a reference to that window as shown above.
Now the localStorage can indeed be used to communicate between two different windows via storage events; you won’t be able to get a reference to the other window this way, but you can transmit messages. For example:
Sorry, but I don’t understand. I have main.html, test.html and script.js in the same folder. So how come script.js know document.getElementById is referring to main.html?
Ah okay, well your JS is not a persistently running program shared between your pages, no matter where it is located; instead, it is getting executed anew for each page loading it, and only in the context of that page. So when loaded into main.html it will find the #test element but not #tt; and when loaded into test.html it’s the other way round.
So is local storage the best way to do this? Since I want to share script.js for main.html and for test.html?
It depends what exactly you want to do… using the local storage works and is simple, but also rather limited and not really intended for complex communication. A better way is using postMessage(), but this requires again a reference to the window you want to communicate with.
Yet another way is communication via your backend; I’m not familiar with eel, but from a quick look it seems to provide a way to directly expose a python API to your JS… so maybe you could use this as a channel to communicate between your 2 pages?
ok thanks for your help. I’m not really familiar with JS, so may be I should do more research.
Well if you have further questions we’re happy to help. :-)
thanks
I was actually rather intrigued by eel, so I’ve been playing around a bit… FWIW you can indeed use it to communicate between your windows, here’s a simply PoC:
However, if at all possible I’d rather open() the other window from the main window so that you can send messages without using the python backend as an intermediary, which will certainly be much slower. Also, with a window reference you might not even need to send messages but can access and modify the other document directly.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.