Two html files and one javascript file , changes with jquery

Question

I have two html files.

first.html

<button id="dada">dada</button>

second.html

<div id="chatbox"></div>

I have one js file for both of them.

script.js

$('#dada').on('click',function () {
    $('#chatbox').css('border','3px solid red');
})

When I click on button in the first page i want to change the box in the another page. But this not working? How to do it properly? Thanks!

You can only show one of the HTML files at a time? You can’t have one file change the css of another. — Chris Cousins, Aug 25 '18 at 16:42
How are the files embedded? Please provide more details and possibly add the full code. — Marcello Mönkemeyer, Aug 25 '18 at 16:54
you can use `LocalStorage` in the first page and the second one listens for the `storage` event and thus change `chatbox`'s border. — ThS, Aug 25 '18 at 18:13

score 0 · Answer 1 · answered Aug 25 '18 at 16:51

0

You probably have some misconception about how javascript engine in the browser works.

Basically, each page (open browser tab) keeps its own DOM representation of html and javascript engine operates within scope, where only this DOM is visible for it.

If you need to communicate with other pages, distinct from the one where your UI engine is running the current javascript threat, you can use cookies in combination with server session.

Other alternative is Local Storage.

answered Aug 25 '18 at 16:51

Petr Borák

56
4

You're also not up-to-date ;) [Communication between tabs or windows](https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows). And in case of `window.open()` it's even easier. – Andreas Aug 25 '18 at 16:55

Two html files and one javascript file , changes with jquery

1 Answers1