iframe 内嵌式天气，样式颜色修改

112 阅读 0 评论 74 点赞

我是靠谱客的博主饱满毛巾，这篇文章主要介绍iframe 内嵌式天气，样式颜色修改，现在分享给大家，希望可以做个参考。

这次给大家带来怎样利用iframe让自己的网页可以显示天气，用iframe让自己的网页可以显示天气的注意事项有哪些，下面就是实战案例，一起来看一下。

复制代码

1
2
3
<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tf&skin=gif" frameborder="0" width="400" height="24" allowtransparency="true"></iframe>
// 天气代码

1，要改变内嵌样式的字体颜色，需要在src链接拼接color。color不可带#。

复制代码

1
2
3
4
5
6
7
8
9
 <iframe
            scrolling="no"
            src="https://tianqiapi.com/api.php?style=tf&skin=gif&color=ffffff"
            frameborder="0"
            width=""
            height=""
            allowtransparency="true"
          />

一些iframe实例：

复制代码

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="demo"> 

<div> 

<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=2&num=5" width="650" height="70" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 

</div> 

<div> 

<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=7" style="border:solid 1px red" width="225" height="90" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 

</div> 

<div> 

<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=9" width="800" height="60" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 

</div> 

<div> 

<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=11" width="500" height="15" frameborder="0"></iframe> 

</div> 

<div> 

<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=13" width="650" height="221" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 

</div> 

<div> 

<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=19" width="800" height="120" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 

</div> 

</div>

2 ，iframe加载完毕后,使用DOM元素的contentWindow属性获取到iframe标签的window;然后再使用window的document属性获取到iframe的document;之后就可以正常获取元素了.（网友回答，测试无效）

复制代码

1
2
3
4
5
6
7
8
document.getElementById('ifm').onload = function(){
	document.getElementById('ifm')//获取到iframe
	.contentWindow//获取到iframe的window
	.document//获取到iframe的document
	.getElementById('ifmh1')//正常获取元素
	.style.color = "orange";//修改样式
};