使用新 url 重新加载 iframe src / 位置在 Safari 中不起作用答案

【问题标题】：Reload iframe src / location with new url not working in Safari使用新 url 重新加载 iframe src / 位置在 Safari 中不起作用
【发布时间】：2011-11-10 16:27:05
【问题描述】：

我有一个页面，最初加载的只是 iframe 中的一个表单，如下所示：

<iframe id="oIframe" ...src='somePage>' <form ... /> </iframe>

当您单击表单中的按钮时，会调用一些构建 url 的 javascript，然后我想执行以下操作：

frame.src = 'somePage?listId=1';

这可以在 IE 中使用新内容“重新加载”框架。但是，在 Safari 中这不起作用。

我有可用的 jQuery，但我不想替换现有的 iframe，因为它附加了一些事件。我也无法修改 iframe 的 id，因为它在整个应用程序中都被引用。

我看到了一些类似的问题，但没有似乎对我的确切问题有效的解决方案。

任何人都可以提供的任何帮助都会很棒！

【问题讨论】：

框架 URL 是否与您的外部（主）页面在同一个域中？
是的，框架 URL 与主页在同一个域中

标签： javascript iframe safari

【解决方案1】：

某些浏览器在直接从 javascript 层次结构调用 javascript 对象时不使用“src”，而其他浏览器使用“location”或“href”而不是“src”来更改 url。您应该尝试这两种方法来使用新的 url 更新您的 iframe。

为了防止浏览器缓存，请在 url 中添加一个伪随机字符串（如数字和时间戳）以防止缓存。例如，将“new Date().getTime()”添加到您的 url。

一些调用示例：

document.getElementById(iframeId).src = url;

或

window.frames[iframeName].location = url;

我推荐使用 document.getElementById 的第一个选项

您还可以使用强制 iframe 重新加载页面

document.getElementById(iframeId).reload(true);

【讨论】：

我都试过了，src属性更新了，但是当框架加载时它仍然是原始内容。
我投票赞成这一点，因为它在一个方面有所帮助

【解决方案2】：

所以答案很简单：
1. 在您的页面上添加<div id="container"> </div>
2.当需要重新加载时使用以下jQuery：

$("#container").empty();
$("#container").append("<iframe src='" + url + "' />");

就是这样。当然，使用 jQuery 创建 DOM 有更优雅的方式，但这给出了“刷新” iframe 的想法。适用于 FF18、CH24、IE9、O12（嗯，它是 jQuery，所以它几乎总是可以工作：）

【讨论】：

【解决方案3】：

我使用 jQuery.ajax 找到了一个更好的解决方案（尽管不是特别雄辩）：

jQuery.ajax({
   type: 'GET',
   url: "/somePage?someparms",
   success: function() {
      frameObj.src = "/somePage?someparms";
   }
});

这会强制在框架对象中读取 DOM，并在服务器准备好响应时重新加载它。

【讨论】：

【解决方案4】：

试试这个

form.setAttribute('src', 'somePage?listId=1');

【讨论】：

不需要使用“setAttribute()”来更新框架元素的“src”属性，实际上它在某些浏览器中可能不起作用。
有几种方法可以修改属性 - setAttribute 就是其中之一。我在帖子背后的想法是，safari 可能不支持符号 frame.src = 'new uri here';
我已经尝试过了，但它不起作用......我看到了一些关于 safari 缓存 iframe 的内容。 src 属性实际上已更新，但发送的请求（我正在使用 fiddler 进行监视）不是更新的 src url，而是首先加载到框架中的任何内容
你可以通过尝试这样做来测试缓存：form.src = 'somePage?listId=1&random=552435' 浏览器应该通过url进行缓存，尝试修改url看看是否有效
所以 frame.src 应该只是重新加载目标框架。还有 3 个其他帧不应重新加载。

【解决方案5】：

嗯，我找到了似乎可行的解决方案——这是一项正在进行的工作，但这基本上是我最终要做的：

var myFrame = document.getElementById('frame'); // get frame  
myFrame.src = url; // set src attribute of original frame  
var originalId = myFrame.id; // retain the original id of the frame  
var newFrameId = myFrame.id + new Date().getTime(); // create a new id  
var newFrame = "<iframe id=\"" + newFrameId + "\"/>"; // iframe string w/ new id  
myFrameParent = myFrame.parentElement; // find parent of original iframe  
myFrameParent.innerHTML = newFrame; // update innerHTML of parent  
document.getElementById(newFrameId).id = originalId; // change id back

【讨论】：

【解决方案6】：

我使用 React 遇到了这个问题，将 key 传递给 props.src 解决了它

const KeyedIframe = ({children, ...props}) => <iframe key={props.src} { ...props}>
  {children}
</iframe>

【讨论】：