ホームページに訪問者が郵便番号を検索するためのフォームがあります。送信ボタンをクリックすると、ホームページが iframe を持つ別の内部ページにリダイレクトされます。検索クエリ文字列を iframe src URL に追加したい。
たとえば、郵便番号 3000 を検索すると、「?postcode=3000」が iframe src URL に追加されます。
<iframe src="https://www.externalwebsite.com?postcode=3000" class="auto-height" scrolling="no" frameborder="0"></iframe>
これは、ホームページでの検索に使用しているコードです。
<input type="text" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value='Submit Postcode...';" value="Submit Postcode..." id="postcodesearchQuery" maxlength="4"/>
<input name="searchbutton" value="" type="button" onClick="location.href='postcode.aspx?postcode=' + $('#postcodesearchQuery').attr('value')" id="postcodesearchbutton" />
もちろん、これにより、検索結果が「postcode.aspx」ページの URL に追加されます。例えばwww.mywebsite.com/postcode.aspx?postcode=3000
jQuery append を使用?postcode=' + $('#postcodesearchQuery').attr('value')
して iframe URL src に追加することは可能ですか?
編集
head タグに次を追加すると、機能しません。
<script type="text/javascript">
$('.myiframe' + iFrameID).attr('src', url);
url += '?postcode=' + postcodeValue;
function setIFrameSrc(iFrameID, postcodeValue)
{
var myFrame = $('.myiframe' + iFrameID);
var url = $(myFrame).attr('src') + '?postcode=' + postcodeValue;
$(myFrame).attr('src', url);
}
</script>
iframe コード:
<iframe src="www.externalwebsite.com" class="myiframe" width="100%" height="750px" scrolling="no" frameborder="0"></iframe>