我在页面上有两个iframe,一个对另一个iframe进行了更改,但是另一个iframe直到刷新后才显示更改。有没有一种简单的方法可以使用jQuery刷新此iframe?
<div class="project">
<iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>
我在页面上有两个iframe,一个对另一个iframe进行了更改,但是另一个iframe直到刷新后才显示更改。有没有一种简单的方法可以使用jQuery刷新此iframe?
<div class="project">
<iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>
Answers:
如果iframe不在其他域中,则可以执行以下操作:
document.getElementById(FrameID).contentDocument.location.reload(true);
但是,由于iframe位于不同的域中,因此同源策略会拒绝您访问iframe的contentDocument
属性。
但是,如果您的代码在iframe的父页面上运行,则可以通过将其src属性设置为自身来强行强制跨域iframe重新加载。像这样:
// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;
如果您尝试从另一个iframe重新加载iframe ,则很不走运,这是不可能的。
document.getElementById(FrameID).contentWindow.location.reload(true);
iframe.contentDocument.location=iframe.src;
,效果很好
$('#map_iframe').attr('src', $('#map_iframe').attr('src'));
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
(function (elem) { elem.src = elem.src; }($('#iframe')[0]));
document.getElementById(FrameID).contentWindow.location.reload(true);
无法正常工作。这个答案效果更好。
您也可以使用jquery。这与Alex仅使用JQuery提出的建议相同:
$('#currentElement').attr("src", $('#currentElement').attr("src"));
var f = $('#iframeX') ; f.attr( 'src', f.attr( 'src' ))
可能更易于维护和阅读
用jQuery重新加载iframe
在iframe中建立链接,可以说id =“ reload”,然后使用以下代码
$('#reload').click(function() {
document.location.reload();
});
并且您很高兴与所有浏览器一起使用。
用HTML重新加载iframe(无需Java脚本)
它具有更简单的解决方案:在(FF,Webkit)中无需javaScript即可使用
只需在您的iframe中定位锚
<a href="#" target="_SELF">Refresh Comments</a>
当您点击此锚点时,它只会刷新您的iframe
但是, 如果您有将参数发送到iframe的步骤,请按照以下步骤进行操作。
<a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a>
不需要任何页面网址,因为-> target =“ _ SELF”为您做到了
只是往复Alex的答案,但使用jQuery
var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);
这是另一种方式
$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );
$( '#iframe' ).attr('src', $( '#iframe' ).attr('src'));
如果您是跨网域,则即使位置哈希值发生变化,仅将src设置回相同的URL也不会总是触发重新加载。
手动构建Twitter按钮iframe时遇到了这个问题,当我更新网址时不会刷新。
Twitter之类的按钮具有以下形式:
.../tweet_button.html#&_version=2&count=none&etc=...
由于Twitter使用文档片段作为URL,因此更改哈希/片段不会重新加载源,并且按钮目标也无法反映我的新Ajax加载内容。
您可以附加一个查询字符串参数来强制重新加载(例如:,"?_=" + Math.random()
但这会浪费带宽,尤其是在本示例中,Twitter的方法专门尝试启用缓存。
要重新加载仅使用哈希标签进行更改的内容,您需要删除元素,或更改src
,等待线程退出,然后将其分配回来。如果页面仍在缓存中,则不需要网络命中,但会触发帧重新加载。
var old = iframe.src;
iframe.src = '';
setTimeout( function () {
iframe.src = old;
}, 0);
更新:使用此方法会创建不需要的历史记录项。相反,每次都删除并重新创建iframe元素,这样可以使back()按钮按预期方式工作。也很高兴没有计时器。
$('IFRAME#currentElement').get(0).contentDocument.location.reload()
这可以通过简单的JavaScript来实现。
window.frames
语法在iframe2中触发JavaScript函数。只要确保使用id
/ name
而不是iframe2 src
。//function in iframe1
function refreshIframe2()
{
if (<cfoutput>#didValidation#</cfoutput> == 1)
{
parent.window.frames.iframe2.refreshPage();
}
}
//function in iframe2
function refreshPage()
{
document.location.reload();
}
ifrX =document.getElementById('id') //or
ifrX =frames['index'];
跨浏览器的解决方案是:
ifrX.src = ifrX.contentWindow.location
这特别有用,特别是当<iframe>是<form>的目标时
解决了!我注册股票溢价只是为了向您分享唯一有效的解决方案(至少在ASP.NET/IE/FF/Chrome中)!这个想法是将div的innerHTML值替换为其当前的innerHTML值。
这是HTML代码段:
<div class="content-2" id="divGranite">
<h2>Granite Purchase</h2>
<IFRAME runat="server" id="frameGranite" src="Jobs-granite.aspx" width="820px" height="300px" frameborder="0" seamless ></IFRAME>
</div>
和我的Javascript代码:
function refreshGranite() {
var iframe = document.getElementById('divGranite')
iframe.innerHTML = iframe.innerHTML;
}
希望这可以帮助。
runat="server"
不适用;2.为什么所有的上限都是IFRAME
?3.维度属性值没有单位;4. frameborder
已弃用