iframe页面嵌套问题

开发工具与关键技术：VisualStudio C#
作者：落灵
撰写时间：2019/6/8

一、 iframe的框架根据内容自适应高度
iframe是在项目设计中经常用到的框架标签。而它的作用就是把页面嵌套在自身形成的框架体中，从而实现在一个固定的地方可以切换多个页面，并且其他内容不变。在使用iframe这个框架标签时新手往往是直接固定iframe的宽高。那么当文本内容的长度不一样时就要一个一个地设置。当有上百个页面时这无疑是增加了代码量。而这个问题的解决方法也非常简单，我们只需要让它自适应高度就好。

二、点击iframe内部页面进行页面跳转问题
iframe虽然可以嵌套多个页面，但也存在一个非常严重的问题。那就是iframe标签的页面跳转问题。正常情况下我们可以通过点击iframe框架区以外的地方来改变iframe嵌套的内容。但当我们在被iframe嵌套的页面里写window.location.href的页面跳转事件时，跳转的那个页面它不会覆盖掉当前的页面，而是被嵌套进iframe里。由于页面的宽度的百分比发生了变化，这对极大地影响被嵌套的页面的样式。例子如下图

就像上面这个样子。而不能让iframe内部嵌套的页面覆盖掉当前页面也是有原因的，因为这涉及到了安全性的问题。有iframe的一般都是主页面，如果让外来的页面把主页面覆盖掉，那么这个页面就可以对主页面进行操作，能够获取到主页面的信息。所以iframe內部嵌套的页面进行window.location.href的页面跳转时，跳转到的页面也会嵌套进iframe里面。
可当我们点击iframe里面的页面跳转到另一个页面需要把当前的页面覆盖掉时又该怎么办？这是我们可以通过点击a标签进行跳转；

<a id="a_link" href="" target="_blank" hidden></a>

target=”_blank”是从空白页打开新的页面，如果是target=”_self”就是从当前页面打开新的页面，如果是这样的话，打开的页面还是会被嵌套进iframe里面，所以我们从空白页打开。

三、点击iframe外部的页面进行iframe页面嵌套问题
这个问题是涉及到了iframe的主页面与其他页面的关联性。在首次加载主页面时我们可以在方法里用attr设置主页面的默认首次加载页面，然后再调用方法，这样就可以设置iframe首次加载的页面了。

可当有存在两个页面，点击一个页面的a标签，跳到主页面时iframe要把对应的页面嵌套进来。而主页面本身就有与另一个页面相同的标签，点击后就能把对应的页面嵌套进来。那么，问题就来了，怎么通过点击当前页面的标签触发另一个页面对应标签的点击事件？
这个问题就需要通过控制器的参数传递了来解决了。我们可以在点击跳转到主页面的同时通过控制器传递一个参数到主页面。控制器接收到参数后用View.Data或者View.Bag接收参数，然后再在主页面设置一个隐藏的input标签接收参数。这时我们就可以通过对参数的判断让iframe嵌套对应的页面了。假如在a页面有学生，老师，校长这三个标签。点击学生时就把学生这个字段传递到主页面，主页面则判断传递过来的参数。当参数==“学生”时嵌套学生页面，参数==“老师”时嵌套老师页面，以此类推，问题就解决了。

iframe页面嵌套问题相关推荐

h5 iframe嵌套页面_如何将一个HTML页面嵌套在另一个页面中
展开全部这个在做网页中常e69da5e887aa62616964757a686964616f31333339666636要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要 ...
如何将一个HTML页面嵌套在另一个页面中
如何将一个HTML页面嵌套在另一个页面中 2010-05-05 16:45 559人阅读评论(1) 收藏举报这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页 ...
如何将一个HTML页面嵌套另一个页面中
如何将一个HTML页面嵌套另一个页面中这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可.这样便于维护,如果有很多网页,当通用 ...
html页面嵌套html页面
这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可.这样便于维护,如果有很多网页,当通用内容需要修改时,只改一个文件就可以了,不 ...
HTML5怎么编辑另一个页面,html中嵌套iframe页面如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
iframe标签（页面嵌套）
开发工具与关键技术:VS <iframe> 作者:听民谣的老猫撰写时间:2019/6/10 18:15 上面两张图是两个不同的页面但是它们的基本框架都是一样,每点击一次左边的导航栏改变的 ...
点击div外区域隐藏div操作(嵌套iframe页面)
一.正常页面 $(document).click(function(){$(dom).hide();//要隐藏的div}); 这个是最基础的原型,如果是有弹窗和遮罩层的,点击遮罩层的部分关闭弹窗和遮罩 ...
h5 iframe嵌套页面_关于解决iframe标签嵌套问题的解决方法
问题描述当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否已经存在 //根据该节点名字判断该节点 ...
Django iframe重定向页面嵌套问题
当我们使用django开发网站时,有时会使用到iframe技术,iframe直接在页面之上展示内容,十分方便,但是当我们需要在iframe页面中进行重定向(redirect)到一个url时会出现嵌套页 ...

iframe页面嵌套问题

iframe页面嵌套问题相关推荐

最新文章

热门文章