0

I have an html file:index.html which contains some basic js libs. And I also have some modules：

a.html:

<div id='a'>
  <script src="a1.js"></script>
  <script src="a2.js"></script>
</div>

a1.js:

console.log('a1')

a2.js:

console.log('a2')

How can I dynamically load a.html into index.html and get the event that a1.js and a2.js are completed executed?

Device
  • 574
  • 4
  • 19
user7279967
  • 1
  • 1

1 Answers1

1

use w3data.js to do that ( w3data.js )

Example: in index.html

<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="a.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>
Md. Nasir Uddin Bhuiyan
  • 1,598
  • 1
  • 14
  • 24
  • but, how can I get the event that a1.js and a2.js are completed executed? – user7279967 Dec 11 '16 at 10:59
  • as this includes your a.html file, so this will also execute your a1.js and a2.js file – Md. Nasir Uddin Bhuiyan Dec 11 '16 at 11:01
  • I read the source code of w3data.js and found it use innerHTML to append the external html file: a.html. I know that it will load a1.js and a2.js and execute them, but I want to catch the event that a1.js and a2.js are executed immediately. Is possible to do that ? – user7279967 Dec 11 '16 at 11:08
  • To catch the event of a1 you have to write some code before or after console.log('a1') in a1.js. same in a2.js – Md. Nasir Uddin Bhuiyan Dec 11 '16 at 11:15
  • I got an idea that I can use AJAX to get a.html`s content, use regex to get all – user7279967 Dec 11 '16 at 11:19
  • that sounds so complex – Md. Nasir Uddin Bhuiyan Dec 11 '16 at 11:21
  • Yes, it is. Because I want to achieve that I can dynamic load a.html/b.html which include some external js file and get the event that all external js file are executed. And people who write a.html/b.html have no need to append any code to a.js/b.js, they just need to write a normal html file and a normal js file. – user7279967 Dec 11 '16 at 11:28