jquery - 更改 iframe 的高度和来源

Question

我的页面上有一个 iFrame，下面有一个链接列表。我需要这些链接来更改 iFrame 的来源和高度，并在单击时转到页面顶部、命名锚点“顶部”。

可能使用jQuery？

有什么建议么？

Answer 1

是的，使用 jquery 绝对可以做到这一点。我不确切知道 iframe 中的代码是什么样的，但是要按名称选择 iframe，例如，您可以：

$("iframe[name='figher_profile']").contents();

然后设置它的高度

$("iframe[name='figher_profile']").height($("iframe[name='figher_profile']").contents().find("html").css("height", "100")); //Setting the height to 100 px

要更改 iframe 的来源：

var location = "http://google.com";
$("iframe[name='figher_profile']").attr('src', location);

如果您想对具有 id 或类的 iframe 执行相同操作，只需将 [name='ifr'] 替换为 #id 或 .class ，如下所示：

$("iframe#id") //for id
$("iframe.class") //for class

Answer 2

有很多方法可以做到这一点......因此，我只发布最补救的方法......

<div class="profile_container">
</div>
<a href="#" id="link1">abcd</a>
    <script>
$(document).ready(function(){
  var srcLink = 'http://placehold.it/440x440';
  var srcheight = '440'; 
  var iframeHtml = '<iframe src="'+srcLink+'" width="900" height="'+srcheight+'" frameborder="0" scrolling="no" name="figher_profile"></iframe>';
  $('#link1').click(function(){
    $('.profile_container').html(iframeHtml);
  });
});
    </script>

http://jsfiddle.net/gorelative/AmKJX/1/