需求描述
公司业务上填写的表单,如果表单太长,要能够生成快捷导航列表,用来快速定位区块。
问题难点
由于需要显示的表单内容是在一个iframe之中,如果导航列表放到iframe之中的话,position设置为fixed起不了作用;如果导航列表设置在iframe外面的话,利用a标签的href属性又不生效。
技术实现
概述
在iframe内生成一个导航列表,不显示,外面生成一个导航列表,用于显示,并且给position为fixed,利用js函数模拟点击iframe中的列表来实现快速导航。
设计实现
iframe中添加一个隐藏起来的包含a标签定位的导航列表
<li class="list-group-item">
<a id="list0021" href="#list002">采购项目概述</a>
</li>
在iframe外面的导航列表中生成id和点击事件
<li onclick="navAreaList(this)" class="list-group-item">
<a data-tpye-value="list0032">甄选及业务分配细目</a>
</li>
利用脚本模拟鼠标点击事件
function navAreaList(navListId) {
var chooseTargetId = $(navListId).find("a").attr("data-tpye-value");
window.parent.frames["bottomFrame"].document.getElementById(chooseTargetId).click();
}