So I'd like to share the results here for anyone who can get into simillar issues. Particularly this can be of interest to those who have to ensure HTML5 compliance of the HTML output — where usual frames are deprecated.
So — here is the Webhelp layout template. To use it, just copy and paste the code under Configuration > Publishing options > Webhelp > Layout. Note that you don't have to change anything else but this layout, which means that you can freely customise other things in your HTML further, and you will always get a single-page no-frame help!
The template is the same standard two-pane HM5 Webhelp layout, where I replaced frames with iframes. Also, tables were replaced with DIVs. Several styles were introduced to format elements. The layout is flexible: the left pane is 20% wide and the right one is 80%. Find and modify the corresponding values if you need something a bit different.
Good luck!
Code: Select all
<%DOCTYPE%>
<html>
<head>
<title><%TITLE%></title>
<style type="text/css">
html, body {height: 100%; }
#body {padding: 0; margin: 0; overflow: hidden; }
#left {float: left; width: 20%; height: 100%; vertical-align: top; }
#right {height: 100%; margin-left: 20%; vertical-align: top; }
#nav {width: 100%; min-height: 100%; height: auto important!; height: 100%; overflow: auto important!; }
#main {width: 100%; border-left: 1px solid black; min-height: 100%; height: auto important!; height: 100%; overflow: auto important!; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=<%DOCCHARSET%>">
<script type="text/javascript" src="<%NAVIGATION_SCRIPT%>"></script>
<script type="text/javascript">
<!--
var defaulttopic="<%HREF_DEFAULT_PAGE%>";
if (location.href.lastIndexOf("?") > 0) defaulttopic=location.href.substring(location.href.lastIndexOf("?")+1,location.href.length).replace(/:/g,"");
document.write('<body id="body">');
if (document.getElementById) {
document.write('<div id="left"><iframe id="nav" name="hmnavigation" src="<%HREF_CONTENT_PAGE_DYN%>" title="Navigation"></iframe></div>'); }
else {
document.write('<div id="left"><iframe id="nav" name="hmnavigation" src="<%HREF_CONTENT_PAGE_STATIC%>" title="Navigation"></iframe></div>'); }
document.write('<div id="right"><iframe id="main" name="hmcontent" src="' + defaulttopic + '" title="Content"></iframe></div>');
document.write('</body>');
//-->
</script>
</head>
<noscript>
<body id="body">
<td id="left"><iframe id="nav" name="hmnavigation" src="<%HREF_CONTENT_PAGE_STATIC%>" title="Navigation" /></div>
<td id="right"><iframe id="main" name="hmcontent" src="<%HREF_DEFAULT_PAGE%>" title="Content" /></div>
<noframes>
This content requires support of dynamic HTML.<br>Click <a href="<%HREF_CONTENT_PAGE_STATIC%>">here</a> to view a static table of contents.
</noframes>
</body>
</noscript>
</html>