重新加载iframe src / location，新url在Safari中不工作

Reload iframe src / location with new url not working in Safari

本文关键字：url Safari 工作 location 新加载 加载 src iframe      更新时间：2023-09-26

我有一个页面加载最初只是一个表单在一个iframe，像这样:

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

当你点击表单中的按钮时，会调用一些javascript来构建url，然后我想做以下操作:

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

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

我有jQuery可用，但我不想取代现有的iframe，因为有事件附加到它。我也不能修改iframe的id，因为它在整个应用程序中被引用。

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

任何人能提供的任何帮助都将是伟大的!

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

为了防止浏览器缓存，在url中添加一个伪随机字符串，如数字和时间戳，以防止缓存。例如，在url中添加"new Date(). gettime()"。

一些调用示例:

document.getElementById(iframeId).src = url;

或

window.frames[iframeName].location = url;

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

也可以使用

强制iframe重新加载页面
document.getElementById(iframeId).reload(true);

答案很简单:
1. 把<div id="container"> </div>放到你的页面
2. 当需要重新加载时，使用以下jQuery:

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

就是这样。当然，用jQuery创建DOM有更优雅的方法，但这给了"刷新"iframe的想法。适用于FF18, CH24, IE9, O12(好吧，它是jQuery，所以它几乎总是工作:)

我找到了一个更好的解决方案(尽管不是特别雄辩)，使用jQuery.ajax:

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

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

试试这个

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

嗯，我能够找到一个看起来可行的解决方案——这是一项正在进行的工作，但这基本上是我最终做的:

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

我使用React遇到这个问题，通过key作为props.src解决它

const KeyedIframe = ({children, ...props}) => <iframe key={props.src} { ...props}>
  {children}
</iframe>
相关文章：