Output: WebHelp (html)
The need:
We have a section with multiple topics that depend on HTML iframe to bring content from an external site into our online help docs. Basic iframe apparently has default height and width. Specifying those parameters with height= and width= of course results in a frame of fixed size.
We need the frame to size itself based on content. Some of it is only a few lines long; some goes to 50 lines or more -- a fixed size doesn't work. The larger files sport a scroll bar -- and of course the enclosing topoc has its own scroll bar... anathema to our software developers.
There are numerous code snippets on the Web that size an ifram dynamically based on content, but every one that I can find has the same attribute: they don't say where to insert the code.
Right now, to create the iframes, we're using HM8's Insert HTML code object to execute the iframe in any given topic, as follows:
Code: Select all
<iframe src="../[URL]/designs/[name of file to insert into frame].html" height="600" width="1000"></iframe>
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Auto Adjust iFrame Height Based on Content</title>
<style>
iframe{
width: 100%;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<iframe src="demo.php" id="myIframe"></iframe>
<script>
// Selecting the iframe element
var iframe = document.getElementById("myIframe");
// Adjusting the iframe height onload event
iframe.onload = function(){
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</body>
</html>