JavaScript学习笔记——iframe

iframe

<iframe 
	src="demo.html" 
	height="300" 
	width="500" 
	name="demo" 
	scrolling="auto" 
	sandbox="allow-same-origin">
</iframe>

• src： iframe页面地址，有同域跨域之分
• height： iframe高度
• width： iframe宽度
• name： iframe命名，可通过window.frames[xxx]被调用
• scrolling： iframe滚动模式
• sandbox： html5新特性，用于限制iframe的功能

    <iframe 
    	src="https://www.baidu.com" 
    	width="800px" 
    	height="800px" 
    	frameborder="0">
    </iframe>

使用方法

可以通过contentWindow和contentDocument两个API获取iframe的window对象和document对象

let iframe = document.getElementById('demo');
let iwindow = iframe.contentWindow; 
// 获取iframe的window对象
let idoc = iframe.contentDocument;
// 获取iframe的document对象，但是要在同源（同协议同ip同域名同端口）的情况下才能获取

也可以通过window.frames[iframeName]来调用iframe

let iframe = window.frames['demo']

iframe常用来设置导航栏点击后切换内容，但是有了vue等框架就不常使用了