将搜索查询附加到 iframe src URL答案

【问题标题】：Append search query to iframe src URL将搜索查询附加到 iframe src URL
【发布时间】：2012-06-21 07:41:49
【问题描述】：

我的主页上有一个表单供访问者搜索他们的邮政编码。单击提交按钮时，主页会重定向到另一个具有 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>

【问题讨论】：

标签： jquery url search iframe append

【解决方案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);

}

【讨论】：

我是否将其添加到带有 iframe 的页面？我还需要声明 iframe 的 id 吗？这就是#的用途吗？
是的，'#' 用于 id，如果您有更多 iframe 应该具有此功能，那么您应该在选择器中使用 jquery 类而不是 id。但是使用此解决方案，您需要 iframe 的 id，应将 javascript 函数粘贴到页面中的脚本标记或页面应使用的 js 文件中。然后你应该使用正确的参数在适当的地方调用这个函数，它应该可以工作。
我已经对我的原始帖子进行了编辑，你能告诉我我做错了什么

【解决方案2】：

你可能不需要 jquery，像这样：

window.frames["postcodesearchQuery"].href += ?postcode=' + ...

【讨论】：