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

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

<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不可带#。

 <iframe
            scrolling="no"
            src="https://tianqiapi.com/api.php?style=tf&skin=gif&color=ffffff"
            frameborder="0"
            width=""
            height=""
            allowtransparency="true"
          />

一些iframe实例：

<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;之后就可以正常获取元素了.（网友回答，测试无效）

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

3，还可直接引用第三方api接口就好, appId等参数可以在第三方官网中进行注册调用 , 免费版的一天可以调用300次。（根据实际情况而定，有些公司自己写组件）

最后

以上就是饱满毛巾为你收集整理的iframe 内嵌式天气，样式颜色修改的全部内容，希望文章能够帮你解决iframe 内嵌式天气，样式颜色修改所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。