• iframe元素的学习(笔记)


    什么是iframe:iframe元素即内联框架,iframe是内联的并且承前启后,对于外围的页面,iframe是一个普通的元素,对于iframe里面的内容,又是一个五脏俱全的页面。重下面的写法可以看出,iframe就是一个普通的元素,与span、div一样。注意,iframe既不是内联元素也不是块元素,因为它是可以设置width和height并且不会换行,所以它是inline-block元素。

    一个简单的iframe元素的写法是:

    <iframe id="newframe" name="newframe" src="xin.html"></iframe>

    iframe元素的常用属性:

    1、  frameborder:是否显示边框,yes、no

    2、  height:框架作为一个普通元素的高度,最好使用css设置

    3、  width:框架作为一个普通元素的宽度,最好使用csss设置

    4、  name:框架的名称,window.frame[name]时专用的属性

    5、  scrolling:框架是否滚动。yes、no、auto

    6、  src:内框架的地址,可以是页面地址,也可以是图片的地址在这些属性中,frameborder、scrolling、src几乎所有的iframe都用到它们,典型的iframe元素一般是:

    <iframe id="my" name="my" src=" blank.html " frameborder="0" scrolling="auto" ></iframe>

    关于iframe自适应高度:所谓的高度自适应,一般就是要嵌入的iframe符合一定的要求(内嵌的iframe要适应父页面,当需要滚动条时滚动条显示,不需要时就不显示。当父页面窗口发生变化时,iframe也会变化。当iframe的内容变化时,其滚动条也要适应)。Iframe的自适应高宽只需要窗口大小和iframe元素大小,其中窗口大小是只读的,所以只需要关心iframe元素大小即可。只要注意以下事项就可以了:隐藏父页面滚动条。设置iframe元素的宽和高。Scrolling为auto。设置$(window).resiez()或者$(“#ID”).resiez(),使容纳iframe元素的节点在大小变化时没改变iframe的宽和高以适应。

    iframe与无刷新:iframe实现无刷新的原理就是在A页面的表单提交数据到服务器,并且指定target属性为B页面,服务器返回内容到B页面,然后在B页面中调用JS程序,来刷新A页面,完成一次请求。如果在此过程中,B为A页面的一个iframe页面而且一直不显示,则对用户来说,就是一个无刷新,这种无刷新比ajax要麻烦,但在上传文件时,ajax是无法提交的,此时iframe似乎成了不二选择。但有一个要求就是AB两个页面要同域。

    iframe与jquery:iframe与jquery的关系十分简单,jquery和$是页面上的一个JS对象,即window的一个普通对象,获得这个jquery对象后,就可以进行操作。如果要访问iframe页面的jquery对象,首先要保证能访问子页面的对象,当然iframe页面也要引人jquery.js。

    在父页面访问子页面的jQuery对象。window.frames["xxxIframe"].$("#top"),表示访问子页面的top元素。如果拆分开来,会更容易理解即:

    var iframe$ = window.frames["xxxIframe"].$;
    iframe$("#top");
  • 相关阅读:
    【高端黑】软件工程师去理发店
    [SQL]用于提取组内最新数据,左连接,内连接,not exist三种方案中,到底谁最快?
    Oracle数据库访问客户端 sqldeveloper-19.2.1.247.2212-x64 下载
    《木兰辞》中最精彩的六句
    SqlComparison
    别让情绪扰乱心绪
    50年内神秘消失的恒星
    java命名总结
    针对nginx,来具体聊聊正向代理与反向代理 (转载)
    Nginx可以做什么?(转载)
  • 原文地址:https://www.cnblogs.com/zhuifeng/p/3757863.html
Copyright © 2020-2023  润新知