包含iframe的快速导航功能实现

需求描述

公司业务上填写的表单，如果表单太长，要能够生成快捷导航列表，用来快速定位区块。

问题难点

由于需要显示的表单内容是在一个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();
}