教你利用iframe在網頁中顯示天氣，iframe天氣

最後更新：2014-10-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

來源：http://www.ido321.com/921.html

css：

   1: *{margin:0;padding:0;list-style-type:none;}

   2: a,img{border:0;}

   3: body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}

4:

   5: /* demo */

   6: .demo{width:800px;margin:0 auto;}

   7: .demo div{margin:40px 0 0 0;}

html：

   1: <div class="demo">

2:

   3:    <div>

   4:        <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>

   5:    </div>

6:

   7:    <div>

   8:        <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>

   9:    </div>

10:

  11:    <div>

  12:        <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>

  13:    </div>

14:

  15:    <div>

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

  17:    </div>

18:

  19:    <div>

  20:        <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>

  21:    </div>

22:

  23:    <div>

  24:        <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>

  25:    </div>

  26: /div>

部分效果：

我在項目中做了一個下面的效果

示範地址：http://jsfiddle.net/2yfL8x0g/embedded/result/

下一篇將告訴你怎麼擷取農曆日期：http://www.ido321.com/926.html

怎在A頁面控制B頁面中iframe顯示的網頁？

問題描述不清晰:
A頁面和B頁面是什麼關係,B是架構,那麼A是B中的架構的一員嗎?

補充:
<a href=b.htm target="_top">AAA</a>

怎用iframe代碼顯示調用網頁的指定部分

別人用的什麼方法我不知道，

不過我可以給你指條道兒，這個是我以前用過的辦法，

就是用2個iframe來套用，假設你要引用當前這個問題的頁面中右側的那個“分類上升達人熱門排行榜”，直接iframe這個zhidao.baidu.com/question/123277073.html肯定是不行的。

無法控制位置，所以我想了個辦法，用2個iframe架構來調用，先做一個調用這個架構的頁面load.htm，代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
</head>
<body>
<iframe src="zhidao.baidu.com/question/123277073.html" width="980" height="700" frameborder="0" scrolling="no" style="position: absolute; top: -120px; left: -680px;"></iframe>
</body>
</html>

這個頁面用iframe架構引用了zhidao.baidu.com/question/123277073.html頁面，並且用CSS定位設定了架構浮動位置。

然後我在需要調用zhidao.baidu.com/question/123277073.html的頁面這樣寫：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
</head>
<body>
<iframe src="Un......餘下全文>>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More