Question

我有一个演示页面。该页面是一个文本框和一个iframe。当文本框中的值发生变化时，iframe应该根据该值更新为新的URL（实际上，文本框是隐藏的，并且正在根据更复杂的查找进行更改，但这与此问题无关）。该代码应该非常简单：

$(document).ready(function(){
  $(".id-textbox").change(function(){
    var entryId=$(".id-textbox").val();
    var srcTxt='http://[site]/#id=' + entryId;
    var iframe = $('.webaccess-iframe iframe');
    iframe.attr('src',srcTxt);
  });
});

问题是网址，以及它看起来像这样的事实： http://[site]/#id={some id} 如果你访问那个页面，指定一个id，它实际上会打开你指定的id的文档页面 - 我无法控制它，这就是你使用那个我没写过的网站的方式。

如果您第一次在文本框中键入有效的ID，则设置iframe的src，页面正确加载，一切都很棒。然后，如果您输入了不同的有效ID，iframe的src将设置为新的url，然后没有任何反应，因为浏览器（至少在Firefox中）仍然认为它指向同一个url。毕竟，技术上是相同的网址 - 我们尝试访问的网站不是浏览器的错，而是使用锚点。

我尝试给它提供url然后刷新iframe（使用contentDocument.location.reload（）），但这似乎没有改变行为。我也试过给它：空白然后是网址。这只有一半的时间工作：当你输入有效的id时，它会加载你的页面，然后加载about：blank而不是下一页，然后它正确加载页面，然后加载about：blank而不是等等。

有没有办法强制iframe实际加载新网址？

Answer 1

作为一种有点hacky的解决方法，iFrame会将对查询字符串的更改视为新URL - 但大多数服务器将忽略它们不期望的查询字符串。因此，作为修复，您可以添加一个无意义的查询字符串，每次都会更改（比如日期戳）。

例如：

var srcTxt='http://[site]/?myCrazyQuerystring=' + new Date().getTime() + '#id=' + entryId;

Answer 2

此行为似乎特定于Firefox。可能是一个错误？

请注意，如果iframe中的页面与容器页面位于同一个域中，则可以执行（纯JavaScript）

iframe.contentDocument.location.replace(srcTxt);

如果iframe指向其他网域上的某个网页，则该功能无法使用，因为contentDocument无法通过JavaScript阅读。

Answer 3

http://[site]/#{some id}

没有id=

如何将iframe的src设置为同一页面（使用不同的锚点）

3 个答案: