码迷,mamicode.com
首页 > 其他好文 > 详细

超链接跳转嵌套完成iframe框架 页面双头双尾解决办法

时间:2016-03-17 19:59:46      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:js iframe 超链接

好久没写文章了,今天小码哥在前辈面前落怂了,但也学了点东西,弥补自身知识的欠缺。

最近在做一个项目的时候,由于用到第三方框架的原因,好多自己写的页面在框架中跳转页面的时候不是碰到跨域问题就是碰到其他一些稀奇古怪的问题。今天就又碰到一个让我感觉无从着手的问题。那就是在一个超链接上通过URL跳转页面,目标页面是一个由iframe引入的有头有尾的完整页面嵌套进当前页面的一个操作。悲剧由此发生,当点击超链接的时候,发生如下图:技术分享

这样的两个头部导航的问题。当然还有两个页底的问题。就不贴图了。

就酱紫,小码哥遭到了前辈的鄙视,55555555.该问题该如何解决呢?

前辈支招,说,在点击超链接引入iframe时,让超链接地址直接替换当前页面的URL地址,不就OK了嘛,,好吧,,且看代码:

JS如下:window.top.location.href="指向iframe的URL地址";改代码的意思就是让链接直接替换掉顶层窗口的URL地址。

就上面一句搞定!!!


其实,在前端开发中,就嵌套iframe的时候,还有好多问题,比如像控制引入的iframe下的某个元素实现控制iframe父级窗口里的某个元素的时候,该如何操作呢?

当然,方法肯定是有的,IT都晓得,不懂问百度。

小码哥,为了加深自己印象,喜欢写下来,让自己记得更牢靠。

JS代码有如下控制语句,小码哥就用JQuery方法写了,比较简单:

$(window.parent.document).find();

上面这句代码是要写在iframe里的JS里的。就是通过JS控制iframe里的某个元素,在iframe的父级窗口中通过find方法,找到父级窗口所在的HTML里的某个元素,已达到控制其执行某个事件的目的。



本文出自 “关注技术专注前端” 博客,请务必保留此出处http://oxoxo.blog.51cto.com/9301862/1752105

超链接跳转嵌套完成iframe框架 页面双头双尾解决办法

标签:js iframe 超链接

原文地址:http://oxoxo.blog.51cto.com/9301862/1752105

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!