美文网首页
iframe基本内涵

iframe基本内涵

作者: 下班再说 | 来源:发表于2020-02-28 19:32 被阅读0次

    通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。

    <iframe src="demo_iframe_sandbox.htm"></iframe>

    但是,有追求的我们,并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性

    iframe常用属性:

    1.frameborder:是否显示边框,1(yes),0(no)

    2.height:框架作为一个普通元素的高度,建议在使用css设置。

    3.width:框架作为一个普通元素的宽度,建议使用css设置。

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

    5.scrolling:框架的是否滚动。yes,no,auto。

    6.src:内框架的地址,可以使页面地址,也可以是图片的地址。

    7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用

    8.sandbox: 对iframe进行一些列限制,IE10+支持

    上面一些tag,会在下文进行穿插说明,单个不好说。

    我们通常使用iframe最基本的特性,就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转window.location.href.

    那什么是同域/ 什么是跨域呢?

    就是判断你的url首部是否一样,下面会有讲解,这里只是提及。

    同域不同域的问题:

    A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>

    B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

    使用A时,因为同域,父页面可以对子页面进行改写,反之亦然。

    使用B时,不同域,父页面没有权限改动子页面,但可以实现页面的跳转

    这里,我们先从简单的开始,当主页面和iframe同域时,我们可以干 些什么。

    获取iframe里的内容

    主要的两个API就是contentWindow,和contentDocument

    iframe.contentWindow, 获取iframe的window对象

    iframe.contentDocument, 获取iframe的document对象

    这两个API只是DOM节点提供的方式(即getELement系列对象)

    variframe = document.getElementById("iframe1");variwindow = iframe.contentWindow;varidoc = iwindow.document;

          console.log("window",iwindow);//获取iframe的window对象console.log("document",idoc);//获取iframe的documentconsole.log("html",idoc.documentElement);//获取iframe的htmlconsole.log("head",idoc.head);//获取headconsole.log("body",idoc.body);//获取body

    另外更简单的方式是,结合Name属性,通过window提供的frames获取.

    console.dir(document.getElementById("ifr1").contentWindow);

    其实window.frames['ifr1']返回的就是window对象,即

    window.frames['ifr1']===window

    这里就看你想用哪一种方式获取window对象,两者都行,不过本人更倾向于第二种使用frames[xxx].因为,字母少啊喂~ 然后,你就可以操控iframe里面的DOM内容。

    在iframe中获取父级内容

    同理,在同域下,父页面可以获取子iframe的内容,那么子iframe同样也能操作父页面内容。在iframe中,可以通过在window上挂载的几个API进行获取.

    window.parent 获取上一级的window对象,如果还是iframe则是该iframe的window对象

    window.top 获取最顶级容器的window对象,即,就是你打开页面的文档

    window.self 返回自身window的引用。可以理解 window===window.self(脑残)

    相关文章

      网友评论

          本文标题:iframe基本内涵

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