I have a problem trying to load some iframes with JS.
I am creating an application with talentls in which I have to insert several windows through iframe
, but in the option javascript
if I introduce 2 functions to insert the iframe (one iframe
for the home and another for another window), these functions give me a conflict
JS of the home Iframe
window.onload = function(){
var link = "https://smartwateracademy.com/video/mivideo.php"
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="75%";
iframe.height="450px";
iframe.style="position: absolute; left: 13%; margin-top: 33px;";
iframe.id="randomid";
iframe.setAttribute("src", link);
document.getElementById("video-academy").appendChild(iframe);
}
Iframe of a contact form
//Email function
window.onload = function(){
var mail = "https://smartwateracademy.com/form/formulario.html"
var form = document.createElement('iframe');
form.frameBorder=0;
form.width="75%";
form.height="750px";
form.style="position: absolute; left: 13%; margin-top: 33px;";
form.id="randomid";
form.setAttribute("src", mail);
document.getElementById("form_mail").appendChild(form);
}
When putting the 2 functions in the same js window, if I put the video iframe function first and then the form function, the home video is not seen and if I put it the other way around, it is the form that does not appear in the corresponding window.
Does anyone know how I could create the 2 iframes in the same js file so that I don't have a conflict and both are loaded in their respective windows?
Just like if you do:
a
it would always be 2, because you would be stepping on the value. That's why it only takes into account the last one.One way to do it would be:
JavaScript:
jQuery:
You can see how to assign multiple functions to the onload event: Multiple onload functions
Snippet example with iframes: