iframe子页面控制父页面导航

左侧为父页面导航，右侧为iframe显示内容。

需求是点击运行状态中的图标页面可以跳转到对应的监控页面。

这里如果直接写 a 标签 通过链接跳转，右侧的导航栏的选中状态是没有跟着改变的，所以这里需要进行iframe子页面与父页面的通信

<a onclick="click_go('observe_1.html')" href="javascript:;" >一号设备<br/>运行</a>

<script>
$(function (){app.index();});
function click_go(href){
	$(window.parent.document).find('#admin-offcanvas .active').removeClass('active');//去除选中状态
	$(window.parent.document).find('#collapse-nav').collapse('open');//展开下拉菜单
	$(window.parent.document).find('#admin-offcanvas a[href="'+ href +'"]').parent().addClass('active');//设置选中状态
	location.href=href;//进行页面跳转
}
</script>

其中，在iframe中，使用jQuery通过 window.parent.document 可以获得父页面的dom，并可以相关操作。

通过绑定点击事件，完成父页面的dom操作后，再进行页面跳转即可到达所需效果。

转载于:https://my.oschina.net/u/3463305/blog/1839245