JavaScript Change element attribute of another page change element attribute javascript,change element attribute jquery,change element

Hello guys I have some problem with my website. Here's the situation:

Page 1

<script type="text/javascript" src="jscript.js">
<input type="button" value="change" onClick="changeAttr()">

Page 2

<script type="text/javascript" src="jscript.js">
<input type="text" value="Hello" id="dynamictext">

jscript.js

function changeAttr(){
document.getElemenyById('dynamictext').value="World";
}

Now these 2 pages are open on different tabs. What I want to happen is whenever the button on page 1 is clicked, the value of input text on page 2 will change to "World". How can I make this possible with Javascript or Jquery?

Answer:1

The 1st tab has the task to change a value in localStorage. localStorage.setItem('superValue', 'world');

Meanwhile the 2nd tab would be "listen" to changes on that localStorage value:

var dinamictext = document.querySelector('dinamictext');

setInterval(function () {
    if (dinamictext.value !== localStorage['superValue']) {
        dinamictext.value = localStorage['superValue'];
    }
}, 100);

This of course works only with pages on the same domain.

Answer:2

You cannot directly access DOM elements from one tab to another. That would be a serious security issue.

  • You can communicate between your two pages (assuming they are both under your control) using cookies. See this other SO question on the subject.
  • You can also use LocalStorage API, assuming you are targeting only modern browsers. See this SO answer.

Both methods will allow you to share data. Then, you will have to define your own protocol, in order to manipulate DOM according to the received command.

Answer:3

You can use HTML5 Storage. Here is a simple example

Answer:4

In our frontend build scheme we need to resize images for srcset attribute. I've tried to use gulp-responsive and other Gulp and Grunt plugins, but quality of result images is unacceptable. So, can I ...

In our frontend build scheme we need to resize images for srcset attribute. I've tried to use gulp-responsive and other Gulp and Grunt plugins, but quality of result images is unacceptable. So, can I ...

I'm trying to get WebPack set up with TypeScript and some external libraries, but having some trouble. I'm importing the src version of jQuery in order to let WebPack choose the required modules (...

I'm trying to get WebPack set up with TypeScript and some external libraries, but having some trouble. I'm importing the src version of jQuery in order to let WebPack choose the required modules (...

I've got a more complex structure which breaks down into something like this: http://jsfiddle.net/HGLNz/14/ <ul> <li class="item top"></li> <li class="item top-middle"&...

I've got a more complex structure which breaks down into something like this: http://jsfiddle.net/HGLNz/14/ <ul> <li class="item top"></li> <li class="item top-middle"&...

On a tree layout using d3.js (example), I'd like to collapse nodes that are not in the branch that has been clicked on. For example, in the above demo, try the following: click on "Parent 1" (Child ...

On a tree layout using d3.js (example), I'd like to collapse nodes that are not in the branch that has been clicked on. For example, in the above demo, try the following: click on "Parent 1" (Child ...