Question

I have a tabbed panel where onclick on a specific tab i need to load three js files and a html file into current DOM and execute a method related to those js and html file.

The html file contains templates and need to be loaded into a hidden iframe.

I am able to load the same by appending the respective tags to the body but i need to execute a function after all the files are loaded.

How to get the event after all the files being loaded.?

————— New problem ———————-

Im geting the event successfully after loading the files.

I have below problem.

I have a html file im loading as above and giving the content to a dynamically created iframe as follows

content = document.createElement("iframe");
content.style.display = "none";
content.src = 'data:text/html;charset=utf-8,' + encodeURI(responseText);

My base protocol is https. When the protocol is http im getting no error. Now im getting the following error.

The frame requesting access has a protocol of '', the frame being accessed has a protocol of 'https'. Protocols must match.

Please help.

Answer 1

You hinted at the solution in your last sentence:

Trigger an event!

Register a handler that will wait for your 4 custom events, keep track of which were already received via a global array and execute your function when all required events were triggered.

Of course you will trigger() a custom event at the last line of every one of your asynchronously loaded files.