iframe标签使用总结

前言

  • 最近公司在做后台管理系统,需要实现单页面的跳转,不知是谁突发奇想要用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】

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,320评论 1 41
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,208评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • log日志系统 logging是python的标准日志模块 重要行级别 handler(写入日志) 关于logge...
    思而忧阅读 1,536评论 0 0
  • 第 28 期周刊由「Dean」整理发布主题:谈产品人的信仰 为了能更好的传播产品经理精品文章,我们特意创建「PM ...
    四勾4J阅读 226评论 0 0