Necesito obtener la altura del contenido del iframe y agregarlo al estilo. Esta opción no funciona:
<iframe id="myframe" src="iframe.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:100px;width:100%;border:none;overflow:hidden;"></iframe>Aquí está mi código:
<iframe id="myframe" src="iframe.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:300px;width:100%;border:none;overflow:hidden;"></iframe> <button id="btn" onclick="myFunction()">Add</button> <script> function myFunction() { var x = document.getElementById("myframe"); var y = (x.contentWindow || x.contentDocument); if (y.document)y = y.document; var gg = y.getElementById("vid"); y.head.innerHTML = "<style>body{background :red;border:4px solid green;}.ul{background:rgba(48, 120, 133,0.4);padding:15px;}.big{font-size:20px;}.small{font-size:14px;}</style>"; gg.innerHTML = '<ul class="ul">Greetings from the page<li class="big">Very big hello</li><li class="small">Hello smaller</li></ul>'; } </script>iframe.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Frame</h2> <div id="vid"></div> </body> </html>