I need to get the height of the iframe content and add to the style. This option does not work:
<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>
Here is my code:
<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>