jquery - iframe の高さとソースを変更する

Question

ページに iFrame があり、その下にリンクのリストがあります。iFrame のソースと高さを変更し、クリックするとページの上部にある名前付きアンカー「top」に移動するためのリンクが必要です。

おそらく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 または class を持つ 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/