如何根據iframe内嵌頁面調整iframe高寬續篇實作1 動态接口的安全問題2 讓B這個第三方嵌入一套html代碼好嗎？總結

a.com/detail/view 頁面的iframe代碼如下：

1

b.com是第三方的域名，是以要求在b.com/location/testiframe的頁面增加下面的html

2

3

<code>&lt;iframe id=</code><code>"aiframe"</code> <code>src=</code><code>"#"</code> <code>style=</code><code>"display:none"</code><code>&gt;&lt;/iframe&gt;</code>

<code>a.com/deatil/iframe是a提供的動态接口，傳回的資料是一段js：</code>

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;parent.parent.document.getelementbyid(</code><code>"thirdiframe"</code><code>).style.height=</code><code>"20px"</code><code>;&lt;/script&gt;</code>

這段中的20px是根據參數來生成的

基本這樣就可以了。但是在同僚的提醒下，考慮到後面幾個問題：

a.com/detail/iframe?height=20

是以在安全性上要注意一下，需要對height參數進行驗證，比如使用php的intval這個函數來一勞永逸。

這裡不讨論b是否允許嵌入的商務問題。即使b允許嵌入了，但是以後萬一想修改這個代碼，還需要去讓b來修改。

實際上讓b嵌入一個a域名的js

這個js傳回的内容如下：

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<code>function</code> <code>inita() {</code>

<code>    </code><code>var</code> <code>iframea = document.createelement(</code><code>'iframe'</code><code>);</code>

<code>    </code><code>iframea.style.display=</code><code>'none'</code><code>;</code>

<code>    </code><code>iframea.id=</code><code>'iframea'</code><code>;</code>

<code>    </code><code>document.body.appendchild(iframea);</code>

<code>}</code>

<code>function</code> <code>updateaheight(height) {</code>

<code>    </code><code>if</code> <code>(document.getelementbyid(</code><code>'iframea'</code><code>) == null) {</code>

<code>        </code><code>init360();</code>

<code>    </code><code>}</code>

<code>    </code><code>var</code> <code>iframea = document.getelementbyid(</code><code>'iframea'</code><code>);</code>

<code>if</code> <code>(window.addeventlistener) {</code>

<code>    </code><code>window.addeventlistener(</code><code>'load'</code><code>, inita, false);</code>

<code>}</code><code>else</code> <code>{</code>

<code>    </code><code>window.attachevent(</code><code>'onload'</code><code>, inita);</code>

對上面的一段代碼，注意幾點：

有兩種方法：

c.1 b在改變頁面高度的事件上調用一個函數，來修改b頁面的iframe的src，其中，這裡的updateaheight就是這個用處的

c.2 做循環，循環體内就是将目前頁面的高度設定值，傳遞給iframe，這個循環當然可以給http://a.com/detail/iframejs  這個js來做的。

原本以為很簡單的一個事情，整一整還可以整出這麼多名堂，話說也好久沒寫js了。。。代碼啥的，都是技術熟練活啊。。。