将外层css框架单独存放在一个css文件之中，将iframe的css单独写在一个css文件，避免iframe中的html,body等公共部分的样式冲突。

外层框架单独写在一个css，如：

frame.css

引入页面的css单独写在一个文件，如：

content.css

frame.html如下，只引入frame.css

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>这是框架Html</title>
  6. 		<link rel="stylesheet" href="frame.css" />
  7. 	</head>
  8. 	<body>
  9. 		<iframe src="content.html" width="100%" height="100%"></iframe>
  10. 	</body>
  11. </html>

content页面里则不需要引入frame.css文件，

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>这是contentHtml</title>
  6. 		<link rel="stylesheet" href="content.css" />
  7. 	</head>
  8. 	<body>
  9. 		<!--
  10.         	作者：983521365@qq.com
  11.         	时间：2017-05-16
  12.         	描述：内容区
  13.         -->
  14. 	</body>
  15. </html>

　　

iframe引入页面的更多相关文章

  1. 获取iframe引入页面内的元素

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素.js在父窗口中获取iframe中的元素1.    格式:window ...

  2. jQuery 获取jsp页面中用iframe引入的jsp页面中的值

    <iframe scrolling="no" src="<c:url value='/unitBaseperson/view.do?para=9&op ...

  3. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  4. 解决SpringSecurity限制iframe引用页面的问题

    使用Spring Security的过程中,需要使用iframe来引入其他域的页面,页面会报X-Frame-Options的错误,试了好几种方法一直未能很好的解决这个问题. 这里涉及到Spring S ...

  5. 使用iframe引入公共模块

    新建一个公共文件head.html <!DOCTYPE html><html lang="en"><head> <meta charset ...

  6. Saiku使用iframe嵌入页面访问地址配置化（二十八）--DWR的基本使用

    Saiku使用iframe嵌入页面使用时ip与端口配置化(二十八)--DWR的基本使用 DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开 ...

  7. 在vue项目中通过iframe引入jquery项目

    最近公司因为原来的jq框架存在的问题太多,所以要进行主题框架的重新搭建,我使用的vue进行的主题框架的重新搭建,但是原来的页面已经完成很多了,而且都是使用的jquery进行开发的 在vue中引入jqu ...

  8. 前端错误监控上报公共方法，可在父页面及iframe子页面同时使用

    先创建公共文件error-reported.js 内容如下: /** * 获取前端错误信息进行上报 * @param iframe */ function catchError (iframe) { ...

  9. 父子页面之间元素相互操作(iframe子页面)

    js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...

随机推荐

  1. 《写给大忙人看的Java核心技术》 勘误

    先附上十分讨喜的封面.这应该是爱丽丝梦游仙境里的那只兔子吧? 勘误表基于原版勘误表制作 链接 截止日期 2017-02-09 对应<写给大忙人看的Java核心技术>2016年1月第1次印刷 ...

  2. linux的sar命令未找到

    linux的sar命令未找到 一般的命令可以直接使用yum安装,但是sar和mpstat命令这两个命令都是在sysstat包里, 网上的解决方法:rpm -ivh gd-2.0.32-23.2.i58 ...

  3. 使用注解开发springmvc

    1.导入jar包 commons-logging-1.2.jar spring-aop-4.3.6.RELEASE.jar spring-beans-4.3.6.RELEASE.jar spring- ...

  4. Educational Codeforces Round 51 (Rated for Div. 2) The Shortest Statement

    题目链接:The Shortest Statement 今天又在群里看到一个同学问$n$个$n$条边,怎么查询两点直接最短路.看来这种题还挺常见的. 为什么最终答案要从42个点的最短路(到$x,y$) ...

  5. 牛客练习赛1 矩阵 字符串二维hash+二分

    题目 https://ac.nowcoder.com/acm/contest/2?&headNav=www#question 解析 我们对矩阵进行二维hash,所以每个子矩阵都有一个额hash ...

  6. .NET Core 3.0之创建基于Consul的Configuration扩展组件

    写在前面 经过前面三篇关于.NET Core Configuration的文章之后,本篇文章主要讨论如何扩展一个Configuration组件出来.如果前面三篇文章没有看到,可以点击如下地址访问 .N ...

  7. Docker如何部署Python项目

    Docker 部署Python项目 作者:白宁超 2019年5月24日09:09:00 导读: 软件开发最大的麻烦事之一就是环境配置,操作系统设置,各种库和组件的安装.只有它们都正确,软件才能运行.如 ...

  8. P3367 并查集【模板】 洛谷

    https://www.luogu.org/problem/show?pid=3367#sub 题目描述 如题,现在有一个并查集,你需要完成合并和查询操作. 输入输出格式 输入格式: 第一行包含两个整 ...

  9. error MIDL2311 解决方法

    error MIDL2311 : statements outside library block are illegal in mktyplib compatability mode : [] 在编 ...

  10. Mysql 性能优化20个原则(3)

    12. Prepared Statements Prepared Statements很像存储过程,是一种运行在后台的SQL语句集合,我们可以从使用 prepared statements 获得很多好 ...