Question

有一个示例here，他插入一个iframe，其中iframe的高度更改为插入内容的高度。他解释了诀窍here。

但是，当我尝试使用我的Bootstrap示例时，那么就会阻止JavaScript修改iframe。永远不会将height添加到iframe。

问题

有人可以看到为什么height没有添加到iframe中，因为它是在原始示例中完成的吗？

我将其用作iframe内容

wget http://www.456bereastreet.com/lab/iframe-height/iframe-content.html

我的html是

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <style>
      iframe {
         width:100%;
         margin:0 0 1em;
         border:0;
      }
      #external-frame {min-height:800px;}

      body {
         padding-top: 70px;
      }

      .container .jumbotron {
         background-color: #ffffff;
         padding-right: 0px;
         padding-left: 0px;
         height: 100%;
         margin:0 auto;
      }
    </style>

    <script>
      window.onload = function () {
         setIframeHeight(document.getElementById('external-frame'));
      };
    </script>
  </head>
  <body>

    <div class="container">
      <div class="jumbotron">
    <iframe src="iframe-content.html" frameborder="0" id="external-frame"></iframe>
      </div>
    </div>

  </body>
</html>

Answer 1

这感觉太明显了，但看起来你似乎没有定义setIframeHeight或包含任何定义它的脚本。
如果你想调用一个函数，显然你需要拥有这个函数。
这是从page you linked to：

复制的功能

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
    }
};

将其粘贴到script标记中，您应该好好去。

什么阻止我的JavaScript修改iframe？

1 个答案: