2017-05-09 1 views
0

私はウェブサイトのウェブページにiframeがあるワードプレスのウェブサイトに取り組んでいます。iframeにはiframeにコンテンツを含めるためにjqueryを追加する2つのボタンが含まれています。現在、毎回高さを変更するjavascript関数が含まれていますiframe内のボタンが押されたときに高さを変更したいと考えています。 iframeはwordpressのプラグインファイル内で定義され、iframe srcはwordpress themeフォルダのテンプレートとして定義されています。私はボタンが内側に押されたときにiframeの高さを増やしたいのiframeタグを含む プラグインファイル、iframe内でボタンをクリックしたときにiframeの高さを上げるにはどうすればよいですか?

<iframe src="http://localhost/mysite/firstrate/" frameborder="0" 
scrolling="no" onload="resizeIframe();" id="starwindow" ></iframe> 
<script> 
var obj=document.getElementById("starwindow"); 
function resizeIframe() { 
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; 
} 
</script> 

のiframe SRC(テンプレートファイル)を含むテーマファイル、

<button class="add_form_field" ><span>ADD</span></button> 
<button id="button" class="submit_button"> SUBMIT </button> 
<input type="radio" class="rating1" id="1star5" name="rating1" value="5" /> 
<label for="1star5" title="Five Stars">5 stars</label> 
<input type="radio" class="rating1" id="1star4" name="rating1" value="4" /> 
<label for="1star4" title="Four Stars">4 stars</label> 
<input type="radio" class="rating1" id="1star3" name="rating1" value="3" /> 
<label for="1star3" title="Three Stars">3 stars</label> 
<input type="radio" class="rating1" id="1star2" name="rating1" value="2" /> 
<label for="1star2" title="Two Stars">2 stars</label> 
<input type="radio" class="rating1" id="1star1" name="rating1" value="1" /> 
<label for="1star1" title="One Star">1 star</label> 

This is the screenshot.

iframeのため、ボタンを押すとスクロールバーが表示されません。 ありがとうございます。

答えて

1

あなたはjQueryを使っていることを行うことができます。

$('#starwindow').load(function(){ 

     var iframe = $('#starwindow').contents(); 

     iframe.find("#button").click(function(){ 
       resizeIframe(); 
     }); 
}); 

変更'#button'あなたはインラインフレームサイズ変更に使用する要素によって。

EDIT:

$('#starwindow').load(function(){ 
    var iframe = $('#starwindow').contents(); 
    iframe.find("#add").click(function(){ 
     resizeIframe('add'); 
    }); 
    iframe.find("#delete").click(function(){ 
     resizeIframe('delete'); 
    }); 
}); 

と追加するあなたの機能を変更/削除する高さ

resizeIframe(mode) { 
    if(mode=='add') { 
     //code to add height 
    } 
    else { 
     //code to delete height 
    } 
} 
+0

うわー、おかげで、それは今働いています。 – codewiz

+0

私はいくつかの他の問題も遭遇しました。私が追加ボタンを押すと、「削除」と呼ばれる別のボタンが作成されます。このコードにもそのボタンを含めて、iframeの高さを下げます。 – codewiz

+0

@codewiz私の初心者投稿を編集しました – Mokkun

関連する問題