2

I have two html pages first one is index.html and another one is content.html. content.html page contains a JavaScript function and i would like to call that function from index.html page.

I have embedded the content.html page into index.html page. So please suggest me how can i call that function. Here is the code of both pages. Index.html

<div id="content" class="bg-danger"> 
    <embed src="content.html" id="child" width="100%" height="100%" style="height: 100%">
    </embed> 
</div>

Content.html

<body>
<script type="text/javascript">
function content2(){
    alert("content");
}
</script>
<div>
    Content Page
    <button  id="contentbtn" onclick="content();">Click</button>
</div>

Making a external file makes its easy but condition is that the code must reside on javascript html page.

Justin Green
  • 113
  • 2
  • 2
  • 6
  • I know making a external javascript makes it easy but condition is that the javascript code must reside on that pade not any external files. – Justin Green Aug 24 '15 at 08:59
  • 1
    You can't call the JS embedded in one HTML from another. Period. Who set this "condition"? –  Aug 24 '15 at 09:02
  • Use iframe - the the javascript is usable (cross origin rules apply) – Jaromanda X Aug 24 '15 at 09:02
  • Jaromanda please explain in details.... – Justin Green Aug 24 '15 at 09:03
  • If one of the pages is an iframe, it's also possible to [call a parent window function](https://stackoverflow.com/questions/2161388/calling-a-parent-window-function-from-an-iframe) from the iframe. – Anderson Green Feb 07 '21 at 00:43

6 Answers6

5

Why you don't create a .js file and ref it with this?

<script src="myscripts.js"></script>

Then, you can use in other pages

Kratul
  • 158
  • 2
  • 13
1

From W3Schools

If you want to run the same JavaScript on several pages in a web site, you should create an external JavaScript file, instead of writing the same script over and over again.

Save the script file with a .js extension, and then refer to it using the src attribute in the tag.

<script src="javasriptFIle.js"></script>
Dyrandz Famador
  • 4,499
  • 5
  • 25
  • 40
0
  • Use external javascript files.
  • Import the javascript file in both HTML files
Christoph
  • 1,993
  • 1
  • 25
  • 33
0

Maybe you should consider putting your JS in a file by it self and then call it from the different HTML files.

Then just refer to your JS with <script src="Your script here"></script> in your html

SpaceChimps
  • 115
  • 7
0

Can you use JQuery in your project? Add that to main page then in the embedded child page use Jquery's document.ready(...) or in main page $("child").ready(...);

If not how about this in main page

document.getElementById("child").addEventListener('load', function() { // do something now child is loaded });

0

This method is working fine. its only that you have made an error. the function you have called on the click event in the content page isn't the same as the function on the script tag

on the button click event

onclick="content();"

on the script tag

function content2(){
    alert("content");
}

the two functions are different otherwise it will work fine.

Shamala Larry
  • 11
  • 3