0

I am using jupyter notebook to develop a sort of proof of concept for a project of mine, right now I have the 2 pages loaded in the same iframe in one jupyter notebook cell. Right now I don't know what approach to take to solve the communication between these 2 pages in the same widget.

My 2 pages:

<!DOCTYPE html>
<!-- PAGE 1 -->
<html>
<body>

<button type="button" class="snd_Button">Click</button>
 
</body>
</html>

---------------

<!DOCTYPE html>
<!-- PAGE 2 -->
<html>
<body>

<h1 class ="Listener">I must react.</h1>
 
</body>
</html>

As you can see they are quite simple, what I wanted to know is what would be a good approach to communicate between them. I want to make so that when I click on the button of page 1, the text of page 2 dinamically changes.

I am planning on using javascript and searched solutions around it but I am not sure of how to continue, as I am new in JS programming and not familiar with its libraries (I've found some frameowrks like node.js or electron but I am not sure they should be applied here).

corcu
  • 1

1 Answers1

0

HTML doesn't support modifying the contents of another html page in this way. You'll likely need some server-side code to facilitate this.

In your case, I'd recommend using Websockets. There are plenty of youtube tutorials for similar functionality - search "Websockets Chat App" which should give you a good understanding of how to fire an event on one page, and then listen for that event on the second page.

Edit: You mentioned you have two pages rendering inside the same iframe - that doesn't sound right as iframes can only point to a single source.

In the case that you want to interact between an iframe and its HTML parent, maybe using cross-document messaging like this will work

fippi
  • 504
  • 3
  • 10