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.
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.
Share Improve this question edited Aug 24, 2015 at 9:02 Justin Green asked Aug 24, 2015 at 8:47 Justin GreenJustin Green 1132 gold badges2 silver badges6 bronze badges 5- 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 Commented Aug 24, 2015 at 8:59
- 1 You can't call the JS embedded in one HTML from another. Period. Who set this "condition"? – user663031 Commented Aug 24, 2015 at 9:02
- Use iframe - the the javascript is usable (cross origin rules apply) – Jaromanda X Commented Aug 24, 2015 at 9:02
- Jaromanda please explain in details.... – Justin Green Commented Aug 24, 2015 at 9:03
- If one of the pages is an iframe, it's also possible to call a parent window function from the iframe. – Anderson Green Commented Feb 7, 2021 at 0:43
6 Answers
Reset to default 5Why you don't create a .js file and ref it with this?
<script src="myscripts.js"></script>
Then, you can use in other pages
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>
- Use external javascript files.
- Import the javascript file in both HTML files
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 });
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
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.