JavaScript-iframe

经常进行页面布局的人对于HTML中的iframe标签一定不陌生，iframe标签是一个内联框架，换言之就是用来在当前 HTML 页面中嵌入另一个文档的。

<iframe> 标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。

height可以设置框架显示的高度
width可以设置框架显示的宽度
name可以定义框架的名称
frameborder用来定义是否需要显示边框，取值为1表示需要边框
scrolling用来设置框架是否需要滚动条，取值可以是yes,no,auto src用于设置框架的地址，可以使页面地址，也可以是图片地址 align用于设置元素对齐方式，取值可以是left，right，top，middle，bottom 以上属性可以根据需要进行设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>.control{width: 700px;height: 300px;display: flex;flex-direction: row;
}
.left{width: 200px;height: 300px;display: flex;flex-direction: column;background-color: pink;
}
.right{width: 500px;height: 300px;background-color: skyblue;
}</style>
<body><!-- iframe:可以在页面中嵌入页面src：设置嵌入页面的网络地址width：设置嵌入的网页宽度height：设置嵌入的网页高度scrolling：设置是否可以滚动sandbox html5新特性，用于限制iframe的功能--><div class="control"><div class="left"><button class="btn">国外新闻</button><button class="btn">国内新闻</button><button class="btn">娱乐新闻</button><button data-src="http://www.taobao.com" class="links">淘宝</button></div><div class="right"><iframe src="test1.html" frameborder="0" width="500" height="300"></iframe></div></div><script>var btn = document.querySelectorAll(".btn");var links = document.querySelector(".links");var iframe = document.querySelector("iframe");btn.forEach(function(item,index){item.onclick = function(){iframe.setAttribute("src","test"+(index+1)+".html")}})links.onclick = function(e){console.log(e)iframe.setAttribute("src",e.target.dataset.src)}// iframe.onload = function(){//     console.log(iframe.contentDocument.querySelector("h1"));//     iframe.contentDocument.querySelector("h1").style.backgroundColor = "red";// }如果不是自己的页面，非同源(同ip同协议同端口)不可以修改他的代码</script>
</body>
</html>

JavaScript-iframe相关推荐

java communiframe_[Java教程]javascript iframe相关操作
[Java教程]javascript iframe相关操作 0 2014-08-21 21:02:45 1. 获得iframe的window对象 iframeElement.contentWindow ...
总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
前些日子,一直奔波于这三种操作,想想以后会常用,干脆整理下来,供自己以后查看.也给大家分享一下! 以下面写出自己认为有用的操作和代码. 第一次在园里面写,肯定有很多不足够之处,希望大家多多指点. 一. ...
JavaScript Iframe富文本编辑器中的光标定位
最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...
Javascript iframe交互并兼容各种浏览器的解决方案
在Web前端开发中,我们经常会用到iframe这个控件. 但是这个控在内.外交互时,往往各个浏览器所用的关键字不同,很是麻烦,为了能够得到子iframe中的window对象,各家浏览器有着各家的指定, ...
[JavaScript]iframe的contentWindow
HTMLIFrameElement.contentWindow返回的是HTMLIFrameElement类型元素的window对象通过此对象可以修改iframe实体内的window行为 <if ...
如何实现iframe(嵌入式帧)的自适应高度
好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄 ...
JavaScript跨域方法
一.什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: ...
关于IFRAME的一些小应用
Frame可以在网页内嵌入另一个页面,类似"画中画"形式. 标记的使用格式是: <Iframe src="URL" width="x" ...
HTML IFRAME 用法小总结
iframe是框架的一种形式,也比较常用到,下面是对其在平时常用到属性的总结 Iframe用法,下面是一个常规的列子 <iframe border=2 frameborder=0 width=5 ...
实现IFrame的自适应高度
这个函数可以:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象 <script type="text/javascript ...

JavaScript-iframe

JavaScript-iframe

JavaScript-iframe相关推荐

最新文章

热门文章