Ways to create interaction between two web pages with JavaScript

Question

Ways to create interaction between two web pages with JavaScript

I am attempting to design a webpage where one page can influence the content of another page. I have two HTML pages and a JavaScript file named "Controll.js" which contains a function that changes the content of "Indiv" in Index.html. This function is triggered by a button on Controll.html. Here is my code:

 function myFunction() {
    document.getElementById("Indiv").innerHTML = "Hi!!";
 }

<!-- Controll.html -->

<!DOCTYPE html>
<head>
</head>
<body>


    <button type="button" onclick="myFunction()">write hi</button>

</body>
<script src="Controll.js"></script>
</html>
<!-- END Controll.html -->

<!-- Index.html -->

<!DOCTYPE html>
<head>
  <script src="Controll.js"></script>
</head>
<body>


  <p id="Indiv"></p>

</body>

</html>
<!-- END Index.html -->

javascript jquery html css

Answer 1

Answer №1

When you navigate from one page to another, the Javascript code you write on the first page disappears. However, there is a way to make data persistent using "localStorage". To achieve this, you need to save the string in local storage from the controller and then retrieve it in the index page.

This is how the function should be implemented in Controll.js:


function myFunction() {
    localStorage.setItem('message', 'hi');
}

After implementing the function, you can trigger it on click just like in Controll.html:


<!-- Controll.html -->

<!DOCTYPE! html>
<head>
</head>
<body>

<button type="button" onclick="myFunction()">write hi</button>

</body>
<script src="Controll.js"></script>
</html>
<!-- END Controll.html -->

In index.html, we need to check if the Controll page has sent us any message. If a message is received, it will remain permanently by default. If you only want to send it once, you can delete it after fetching it.

Here's how it can be done in index.js:


var Indiv = document.getElementById('Indiv');

function fetchMessage(){
    // Check if the message exists
    if(localStorage.getItem('message')){
        Indiv.innerHTML = localStorage.getItem('message');
        // Optionally, empty the localStorage after retrieving the message
        localStorage.removeItem('message');
    }
}

Answer 2

When you navigate from one page to another, the Javascript code you write on the first page disappears. However, there is a way to make data persistent using "localStorage". To achieve this, you need to save the string in local storage from the controller and then retrieve it in the index page.

This is how the function should be implemented in Controll.js:


function myFunction() {
    localStorage.setItem('message', 'hi');
}

After implementing the function, you can trigger it on click just like in Controll.html:


<!-- Controll.html -->

<!DOCTYPE! html>
<head>
</head>
<body>

<button type="button" onclick="myFunction()">write hi</button>

</body>
<script src="Controll.js"></script>
</html>
<!-- END Controll.html -->

In index.html, we need to check if the Controll page has sent us any message. If a message is received, it will remain permanently by default. If you only want to send it once, you can delete it after fetching it.

Here's how it can be done in index.js:


var Indiv = document.getElementById('Indiv');

function fetchMessage(){
    // Check if the message exists
    if(localStorage.getItem('message')){
        Indiv.innerHTML = localStorage.getItem('message');
        // Optionally, empty the localStorage after retrieving the message
        localStorage.removeItem('message');
    }
}

Ways to create interaction between two web pages with JavaScript

Answer №1

Similar questions

What is the process for populating the Body placeholder in asp.net Core MVC?

Clicking activates Semantic UI's dropdown function with the onClick method

Is it possible to incorporate npm modules into a browser and utilize them locally on a personal computer?

Tips for building and implementing Angular URL Parameters for URLs in the form: "component/#/?id=..."

Unbind a prepared statement in a node.js environment using SQL

Is it possible to target a dynamically inserted p tag along with its child button using JavaScript?

Using Bootstrap to transform date format to mm/dd/yyyy

When altering the color of a mesh in Three.js, only a single face is impacted by the modification

A serene web service that delivers XML data

Learn the process of directing to a view in a jQuery AJAX call with Spring MVC

What is the best way to design versatile div containers that combine the float property with fluid dimensions?

The call to Contentful's getAsset function resulted in an undefined value being

Converting a Disable submit button from jQuery to alpinejs: A Step-by-Step Guide

Instructions for setting a default value for ng-options when dealing with nested JSON data in AngularJS

Can the Disqus API be leveraged to retrieve comments from a particular website address?

What is the best way to combine two responses and then convert them into a promise?

Is the tablesorter jQuery plugin not functioning properly with Flask or dynamically generated tables using for loops?

Angular: Modify value when checkbox is ticked

Unchecking and checking the radio button is necessary in order for it to function properly

Autocomplete for Converting Postal Codes to Cities