How to call a function in one html page in another html page

Question

I have 2 pages. one.html and two.html

The first html page contains a script tag with a java script function modify(d).In two.html i want to call this same function instead of retyping it again.How can i do this? Do i need to create a link between the pages? if yes, How?

I have tried using in the second file. But i keep getting the error: "modify(d) not defined" in the console.

Both of the files are placed next to each other in my folder structure so the path should be correct.

Thank you in advance.

Create a JS file and reference this file in both HTML documents like `` — J o, Dec 03 '16 at 09:59
It is also possible to call a function from another page by loading it [in an iframe](https://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page). — Anderson Green, Jun 06 '22 at 23:17

Asons · Accepted Answer · 2016-12-03T10:23:26.487

If you drop inline scripts (and it goes for inline styles too) and do like this, where you store functions (and rules) in a file of its own, you will be able to reuse it (them) like shown in below sample

File: one.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page One</title>
        <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
        <link rel='stylesheet' type='text/css' href='css/style.css' />
        <script src="js/script.js"></script>
    </head>
<body>
    Page one content  
</body>
</html>

File: two.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page two</title>
        <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
        <link rel='stylesheet' type='text/css' href='css/style.css' />
        <script src="js/script.js"></script>
    </head>
<body>
    Page two content  
</body>
</html>

File: style.css

body {
  background: url(../images/bkg.png);
}

File: script.js

function modify(d) {
  ....
}

And have your files located like this in your folder

/www/one.html
/www/two.html
/www/js/script.js
/www/css/style.css
/www/images/bkg.png

Pineda · Answer 2 · 2016-12-03T10:03:53.800

You can extract your JavaScript script tag content into its own file and include that script in both HTML pages, so:

create a file somewhere in your folder structure (you can put it in the same path as your HTML files for ease at the moment) let's say it's called my script.js
in each one of your HTML files you can include your script using script tags:
```
<script src="./script.js"/>
```

You can include the script tag in the <head> of your HTML files or as the last element within the <body> tag.

score 0 · Answer 3 · answered Dec 03 '16 at 10:05

You'll need to put the JS in its own file and reference it from both HTML file. Below is a pseudo code to explain better.

script.js

$('.box').click(function(e) {
  e.preventDefault();
  console.log('Box has been logged!');
});

index.html

<script src="./script.js"></script>
<div class="box"></div

other.html

<script src="./script.js"></script>
<div class="box"></div

score 0 · Answer 4 · answered Dec 03 '16 at 10:05

0

Use the concept of External Javascript. Refer the link. Using this, create a single Javascipt file and put the modify() method into it. Now load the javascript on both the forms.(i.e one.html and two.html)

answered Dec 03 '16 at 10:05

ntn

330
2
3
10

How to call a function in one html page in another html page

4 Answers4

Linked