Question

我怎么能：

等待外部iFrame加载
调整外部源iFrame的大小（例如：100px x 40px）
偏移外部采购的iFrame（例如：25px x 50px）

示例代码：

<html>
<body>
    <p>Here's Google's Logo Today:</p>
    <iframe id="google_logo" src="http://www.google.com/search?q=stackoverflow"></iframe>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {});
    </script>
</body>
</html>

我知道你无法获得外部iFrame的内容，但是调整大小和偏移呢？

我也知道我的例子很荒谬。

Answer 1

当外部iframe已完全加载时，您无法触发事件，但其余部分仍然可以。

将框架包裹在div

中

<div id="frame_wrapper">
  <iframe id="google_logo" src="http://www.google.com/search?q=stackoverflow"></iframe>
</div>

添加以下jQuery

$(document).ready(function() {
  $("#frame_wrapper").addClass("iframe_shift");
});

添加以下CSS

#google_logo { width: 100%; height: 100%; }
.iframe_shift { width:100px; height: 45px; position: relative; top: 25px; left: 45px;  }

如何使用外部源调整iframe的大小并偏移内容？

1 个答案: