子頁面內容發生變化時，修改iframe的高度，使其自適應
a.html
- <iframe src="innerIframe.html" width="100%" id="iframe1" style="height: 300px;border: none;" name="iframe1"></iframe>
innerIframe.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- </head>
- <body>
- <div class="inner">
- 這裏顯示的是內容<br/>
- <input type="button" class="add" value="add" dataType="hoder"/>
- <input type="button" class="remove" value="remove" dataType="hoder"/>
- </div>
- <script type="text/javascript" src="../../common/js/jquery-1.7.1.min.js" language="javascript"></script>
- <script type="text/javascript">
- var objIframe=parent.document.getElementById('iframe1');
- objIframe.style.height=($(document).height()+10)+"px";
- $(document).click(function ($e) {
- var elem = $e.srcElement || $e.target;
- while (elem) {
- if (($(elem).attr("dataType") == "hoder")) {
- parent.document.getElementById('iframe1').style.height=($(document).height()+10)+"px";
- }
- elemelem = elem.parentNode;
- }
- });
- $('.add').click(function () {
- $('.inner').append("攝影師拍地鐵撞死人被批見死不救 漁民捕1.2米鱤魚叫賣<br/>");
- });
- $('.remove').click(function(){
- $('.inner').html("a");
- });
- </script>
- </body>
- </html>