美文网首页http
iframe标签使用总结

iframe标签使用总结

作者: A_ria | 来源:发表于2017-03-10 17:24 被阅读771次

前言

  • 最近公司在做后台管理系统,需要实现单页面的跳转,不知是谁突发奇想要用iframe标签来进行实现

  • 在这过程中,遇到的问题,来分享一下

iframe的定义与用法

  • iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

我自己在使用的时候是首先是创建一个父级页面,固定好上部和左侧,右侧定义一个iframe标签,整个标签的宽度、高度占右侧的100%

* 在定义iframe时,给iframe的设置:

`<div class="right"><div class="main"><iframe id="main_frame" name="open_frame" border="0" frameboder="0" scrolling="auto" width="100%" height="100%" src="./mainContext.html"></iframe></div></div>`

* 当然了父页面的a链接必须带有 ` target="open_frame"` 属性,这个 `target的值` 就是iframe中的 `name属性` 的值
* 
* .right这个盒子定义整个右侧这一块的位置;.main这个盒子定义样式,比如说右侧的padding等;
* 
* iframe标签中的name属性是为了给页面上要显示在这块区域的链接一个约定;其他的属性可以自己去查文档,都有很详细的解释

iframe标签定义高度

* 在iframe标签中设置了 'height=100%',若页面内容不是很多,这个区域就撑不起来,所以需要我们使用JS来控制iframe的高度

`var $height=$(window).height();`
`$('iframe').css({'height':$height-140});`  当然这是140是根据你的top的高度和 .main的pading、margin值来设置

在子页面、父页面互相获取元素

** 必须开启服务器,在这里介绍几种开启服务器方法 **

* 如果你配置好了WampServer,那么你只需要把代码放在www文件夹中,通过localhost:端口号来进行访问

* 你安装了node和npm,那么你需要配置一下anywhere就可以了,它是一静态服务器
    
    配置方法:   `npm install anywhere -g` <br/>

    使用方法: 在当前文件夹打开cmd命令行(shift+右键),输入   anywhere 端口号  

* 服务器开启起来了,你就可以跨域获取元素了

子页面获取iframe父页面元素的方法

* 方法一:
`var $arrow = $(".triangle-right", window.parent.document);`

* 方法二:
`var $arrow = $(window.parent.document).find(".triangle-right");`

父级页面获取iframe子页面元素的方法

** 在父级页面加载的时候,子级页面不一定是加载完成的,所以建议使用子页面获取父级元素的方式 **

`var $mainCon = $("#mainCon",document.frames('iframename').document)`

【end】

相关文章

  • iframe标签使用总结

    前言 最近公司在做后台管理系统,需要实现单页面的跳转,不知是谁突发奇想要用iframe标签来进行实现 在这过程中,...

  • HTML 常用的标签

    iframe标签 iframe 与 a标签结合使用 a标签 a标签的属性详见 a标签的target属性 a标签的h...

  • 常用的HTML标签

    1. iframe标签 功能:嵌套页面 1.1 a标签和iframe标签一起使用实现嵌套页面间的切换 2. a标签...

  • 不打开新页面下载文件

    1. 使用IFrame 2. IFrame 模拟POST请求 3. 使用a 标签 4.XMLHttpRequest...

  • HTML 常用标签

    HTML 常用标签 1. iframe 标签 iframe 标签主要用途是嵌套页面,目前使用较少,只有一些遗留项目...

  • 网络爬虫(十六)selenium处理iframe

    selenium处理iframe如果定位的标签在iframe中,必须使用swith_to.frame(id)动作链...

  • HTML 常用的标签

    iframe标签 :用于嵌套页面,name属性可以与a标签关联使用 a标签:target="_block"打开新页...

  • iframe详解

    1. iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 fra...

  • HTML 常用标签

    1. iframe 标签 iframe 标签主要用途是嵌套页面,目前使用较少,只有一些遗留项目在用。具体可以参考 ...

  • HTML 常用标签

    1. iframe 标签 iframe 标签主要用途是嵌套页面,目前使用较少,只有一些遗留项目在用。具体可以参考 ...

网友评论

    本文标题:iframe标签使用总结

    本文链接:https://www.haomeiwen.com/subject/ookogttx.html