我想重新加载一个<iframe>使用JavaScript。到目前为止,我发现最好的方法是将iframe的src属性设置为自身,但这不是很干净。什么好主意吗?
当前回答
您是否考虑过向url附加一个毫无意义的查询字符串参数?
<iframe src="myBaseURL.com/something/" />
<script>
var i = document.getElementsById("iframe")[0],
src = i.src,
number = 1;
//For an update
i.src = src + "?ignoreMe=" + number;
number++;
</script>
它不会被看到&如果你意识到参数是安全的,那么它应该是好的。
其他回答
将空字符串附加到iFrame的src属性也会自动重新加载它。
document.getElementById('id').src += '';
我有一个问题,因为我没有使用超时给页面时间更新,我将src设置为“,然后将其设置回原来的url,但什么都没有发生:
function reload() {
document.getElementById('iframe').src = '';
document.getElementById('iframe').src = url;
}
但是它没有重新加载网站,因为它是单线程的,第一个改变不做任何事情,因为这个函数仍然占用线程,然后它设置回原来的url,我猜chrome不重新加载是因为性能或其他什么,所以你需要做:
function setBack() {
document.getElementById('iframe').src = url;
}
function reload() {
document.getElementById('iframe').src = '';
setTimeout(setBack,100);
}
如果setTimeout时间太短,它不工作,所以如果它不工作,尝试将它设置为500或其他东西,看看它是否工作。
这是在最新版本的chrome在写这篇文章的时候。
window.frames['frameNameOrIndex'].location.reload();
从Iframe内部重新加载
如果你的应用程序在Iframe中,你可以通过替换位置href来刷新它:
document.location.href = document.location.href
如果你尝试了所有其他的建议,但没有一个奏效(就像我一样),这里有一些你可以尝试的可能有用的建议。
HTML
<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>
JS
$('.refresh-this-frame').click(function() {
var thisIframe = $(this).attr('rel');
var currentState = $(thisIframe).attr('src');
function removeSrc() {
$(thisIframe).attr('src', '');
}
setTimeout (removeSrc, 100);
function replaceSrc() {
$(thisIframe).attr('src', currentState);
}
setTimeout (replaceSrc, 200);
});
我最初打算通过RWD和跨浏览器测试来节省一些时间。我想创建一个快速的页面,里面有一堆iframes,组织成我可以随意显示/隐藏的组。从逻辑上讲,您希望能够轻松快速地刷新任何给定的帧。
我应该指出的是,我目前正在进行的项目,也就是在这个测试台上使用的项目,是一个单页站点,站点的位置有索引(例如index.html#home)。这可能与为什么我不能得到任何其他解决方案来刷新我的特定框架有关。
话虽如此,我知道这不是世界上最干净的东西,但它对我的目的很有效。希望这能帮助到一些人。现在,如果我能弄清楚如何保持iframe在每次iframe内有动画时滚动父页…
编辑: 我意识到这并没有像我所希望的那样“刷新”iframe。它将重新加载iframe的初始源。仍然不明白为什么我不能得到任何其他的选择工作..
更新: 我不能得到任何其他方法工作的原因是因为我在Chrome中测试它们,Chrome不允许你访问iframe的内容(解释:当iframe从本地html文件加载本地html文件时,是否有可能未来的Chrome版本支持contentWindow/contentDocument ?)如果它不是来自同一个位置(据我所知)。经过进一步测试,我也无法访问FF中的contentWindow。
修改JS
$('.refresh-this-frame').click(function() {
var targetID = $(this).attr('rel');
var targetSrc = $(targetID).attr('src');
var cleanID = targetID.replace("#","");
var chromeTest = ( navigator.userAgent.match(/Chrome/g) ? true : false );
var FFTest = ( navigator.userAgent.match(/Firefox/g) ? true : false );
if (chromeTest == true) {
function removeSrc() {
$(targetID).attr('src', '');
}
setTimeout (removeSrc, 100);
function replaceSrc() {
$(targetID).attr('src', targetSrc);
}
setTimeout (replaceSrc, 200);
}
if (FFTest == true) {
function removeSrc() {
$(targetID).attr('src', '');
}
setTimeout (removeSrc, 100);
function replaceSrc() {
$(targetID).attr('src', targetSrc);
}
setTimeout (replaceSrc, 200);
}
if (chromeTest == false && FFTest == false) {
var targetLoc = (document.getElementById(cleanID).contentWindow.location).toString();
function removeSrc() {
$(targetID).attr('src', '');
}
setTimeout (removeSrc, 100);
function replaceSrc2() {
$(targetID).attr('src', targetLoc);
}
setTimeout (replaceSrc2, 200);
}
});
推荐文章
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?
- 如何创建一个日期对象从字符串在javascript
- 输入触发器按钮单击
- 获取对象的属性名
- 如何检查用户是否可以回到浏览器历史
- 相当于字符串。jQuery格式
- 如何在vue-cli项目中更改端口号
- Angular 2模板中的标签是什么意思?
- JavaScript .includes()方法的多个条件
- 窗口。亲近与自我。close不关闭Chrome中的窗口
- 同步和异步编程(在node.js中)的区别是什么?
- 在d3.js中调整窗口大小时调整svg的大小
- 如何将两个字符串相加,就好像它们是数字一样?
- 绑定多个事件到一个监听器(没有JQuery)?