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

5 Answers5

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,439
  • 5
  • 23
  • 39
0
  • Use external javascript files.
  • Import the javascript file in both HTML files
Christoph
  • 1,973
  • 1
  • 23
  • 32
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 });