JavaScript-给iframe里的内容定义样式

2016-02-19 20:30 36 1 收藏

图老师小编精心整理的JavaScript-给iframe里的内容定义样式希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

  案例1:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  做一个通用的反馈表单应用在其它页面的框架里,要求在框架外面可以定义框架里面的页面样式。

  程序代码

iframe name="feedbackform" id="feedbackform" src="xx.aspx" mce_src="xx.aspx" width="755" height="500" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"/iframe

script type="text/javascript"
var temp_css;
temp_css="style type="text/css"";
temp_css+="body{padding:10px 0;margin:0;font-size:12px;}";
temp_css+="/style";
window.onload=function(){
var obj=window.frames["feedbackform"];
obj.document.body.innerHTML+=temp_css;
}
/script

  案例2:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  例:需要在a.html中去改变b.html中.abc的色彩。

  程序代码

a.html
iframe src="b.html" mce_src="b.html" id="content" name="content" height="15" width="468" scrolling="no" frameborder="0"/iframe
script type="text/javascript"
document.frames['content'].document.styleSheets[0].addRule(".abc","color:#FF0000");/script

b.html

style.abc{color:#000000}/style

来源:https://www.tulaoshi.com/n/20160219/1623861.html

延伸阅读
标签: Web开发
程序代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title鼠标在焦点时移动位置/title style type="text/css" /* Reset style */ * {...
标签: Web开发
使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大,但JavaScript还是提供了创建一个新对象的方法。 使其不必像超文本标识语言那样,求于或其它多媒体工具,就能完成许多复杂的工作。 在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象,而后再为该对象创建一个实例。这个实例就是...
标签: Web开发
页面内嵌不同的网页内容时,导致iframe的高度无法与实现内容或浏览器高度相匹配。窗口大小变换时,不能iframe不能进行自动调整。这里,我们利用JAVASCRIPT让IFRAME框架的高度自适应。 首先,写出如下的JS方法。 /**  * 内嵌页面的高度设置  */ function handleFrameLoad() {  var hDoc = getBodyHeight(document); &n...
标签: Web开发
继承样式定义方法,这样写的好处可以节省网页的代码容易真正的代码与内容相分离,对seo优化也有很大的帮助,下面我们来看一个简单的实例. style .nav ul li a:hover{ background:url(imgs/hover.gif) left top no-repeat; } .nav ul li{  height:28px;  width:100%; } .nav ul li a{ display:block; height:28px; width:100%; margin...
标签: Web开发
YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移除额外的空格 细微优化 标识符替换(Identifier Replacement) YUI Compressor 包括哪些细微优化呢? object["property"] ,如果属性名是合法的 JavaScript 标识符(注:合法的 JavaScript 标识符由一个字母开头,其后选择性地加上一个或者多个字母、数字或下划线)...

经验教程

367

收藏

62
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部