I'm encountering a problem with a website I'm currently developing - specifically, I am struggling to embed an HTML document into an iframe in a manner that fills the entire page. Additionally, I am utilizing Angular to retrieve the HTML document, as indicated by the src attribute. The current appearance of the page is depicted here:
1) https://gyazo.com/f5cb06ede5fc0b6da99f49dfd8e32d5f 2) https://gyazo.com/c9ad51e9bfaa12fedc4e1c2dbcbb7b42
You may have observed that there is a scroll bar present, which is the issue at hand. How can I remove the scroll bar and showcase the webpage content so that it expands fully without the scroll bar? Below is my code for your reference:
<iframe id="content" [src] = "recipeHTML | safe">
</iframe>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>
Thank you tremendously.