jquery - 将搜索查询 append 到 iframe src URL

Question

我的主页上有一个表格，供访问者搜索他们的邮政编码。单击提交按钮后，主页将重定向到另一个具有 iframe 的内部页面。我希望将搜索查询字符串 append 到 iframe src URL。

例如搜索邮政编码 3000 会将“?postcode=3000” append 到 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>

Answer 1

您可以使用 jQuery 的 attr 函数来设置它:

$('#' + iFrameID).attr('src', url);

当然你必须先设置url，如下所示:

url += '?postcode=' + postcodeValue;

将这些放入我们得到的函数中:

function setIFrameSrc(iFrameID, postcodeValue)
{
    var myFrame = $('#' + iFrameID);
    var url = $(myFrame).attr('src') + '?postcode=' + postcodeValue;
    $(myFrame).attr('src', url);

}