tengo el siguiente iframe
<iframe frameborder="0" src="//www.youtube.com/embed/adLvq2haaFg" class="note-video-clip"></iframe> Cuando iframe a través de getElementsByTagName como este
let a = document.getElementsByTagName("iframe")[0]; a.setAttribute('allowfullscreen', '');Vuelve:
<iframe frameborder="0" src="//www.youtube.com/embed/adLvq2haaFg" class="note-video-clip" allowfullscreen=""></iframe> Me está creando un problema porque no funciona como se esperaba. Cuando inserto manualmente allowfullscreen al principio, funciona bien.
Este es el resultado que quiero en su lugar
<iframe allowfullscreen="" frameborder="0" src="//www.youtube.com/embed/adLvq2haaFg" class="note-video-clip" ></iframe>¿Qué estoy haciendo mal?
Una forma sencilla de agregar allowfullscreen="" justo después del nombre de la etiqueta es modificar el outerHTML del elemento utilizando el método de split de cadena y el método de splice de matriz como en el código a continuación.
const miFrame = document.getElementsByTagName("iframe")[0]; console.log(miFrame); // Split the outerHTML string into separate pieces // by using a space as the separator const miFrameOH = miFrame.outerHTML.split(' '); // Using splice(position, deleteCount, itemToAdd), // add attribute at index 1 miFrameOH.splice(1, 0, 'allowfullscreen=""'); // Join the parts (including the attribute) with a space separator and // set this string to the outerHTML miFrame.outerHTML = miFrameOH.join(' '); console.log(document.getElementsByTagName("iframe")[0].outerHTML); <iframe frameborder="0" src="//www.youtube.com/embed/adLvq2haaFg" class="note-video-clip"></iframe>