什么是最好的方式来重新装载/刷新框架?

Question

我想重新加载 <iframe> 使用JavaScript。最好的办法，我发现直到现在设的框架的 src 属性本身，但是这并不是非常清洁。任何想法？

Answer 1

document.getElementById('some_frame_id').contentWindow.location.reload();

小心，在火狐， window.frames[] 不能被编入索引号，但是通过名字或指数

Answer 2

document.getElementById('iframeid').src = document.getElementById('iframeid').src

它将重新加载 iframe, 甚至跨领域!测试与IE7/8，火狐和铬。

Answer 3

如果使用jQuery，这似乎是工作：

$('#your_iframe').attr('src', $('#your_iframe').attr('src'));

我希望它不是太丑用于计算器.

Answer 4

window.frames['frameNameOrIndex'].location.reload();

Answer 5

加空的空间也载的框架。

document.getElementById('id').src += '';

Answer 6

因 同样的原产地政策, 这不工作的时候，修改框架指向一个不同的领域。如果你可以针对较新的浏览器，可考虑使用 HTML5的跨文档的消息.你看浏览器，支持这个特点在这里： http://caniuse.com/#feat=x-doc-messaging.

如果你不能使用HTML5的功能，那么你就可以按照技巧概述了这里: http://softwareas.com/cross-domain-communication-with-iframes.该博客入口，也不一个良好的工作的定义问题。

Answer 7

我刚刚碰到这个中铬的唯一的事情就是去除并替换的框架.例如：

$(".iframe_wrapper").find("iframe").remove();
var iframe = $('<iframe src="' + src + '" frameborder="0"></iframe>');
$.find(".iframe_wrapper").append(iframe);

很简单、不复盖在其他的答案。

Answer 8

对于新的url

location.assign("http:google.com");

分配()方法时加载新文件。

重新加载

location.reload();

重新载入()方法是用来重新装载前文件。

Answer 9

一个改进对yajra后...我喜欢的思想，但不想浏览器检测。

我宁愿采取ppk的看法的使用目的检测，而不是浏览器的检测， (http://www.quirksmode.org/js/support.html), 因为那你真正测试的能力的浏览器，并采取相应行动，而不是你怎么想的浏览器能够在这段时间。也不需要这么多丑陋的浏览器ID string分析，并且不排除完全能够浏览器，你无所知。

那么，而不是看导航仪。应用程序，为什么不做这样的事情，实际测试的元素，你使用？(你可以使用的尝试{}块如果你想获得甚至更花哨，但这个工作对我。)

function reload_message_frame() {
    var frame_id = 'live_message_frame';
    if(window.document.getElementById(frame_id).location ) {  
        window.document.getElementById(frame_id).location.reload(true);
    } else if (window.document.getElementById(frame_id).contentWindow.location ) {
        window.document.getElementById(frame_id).contentWindow.location.reload(true);
    } else if (window.document.getElementById(frame_id).src){
        window.document.getElementById(frame_id).src = window.document.getElementById(frame_id).src;
    } else {
        // fail condition, respond as appropriate, or do nothing
        alert("Sorry, unable to reload that frame!");
    }
}

这样，你可以尝试许多不同的排列为你喜欢或是必要的，而不会造成javascript错误，并做一些明智的，如果一切都失败了。这是一个小更多的工作，以测试对象之前使用他们，但是，国际海事组织，使用更好的和更多的故障安全代码。

为我工作在IE8，火狐(15.0.1)、铬(21.0.1180.89m)和歌剧院(12.0.2)。

也许我可以做得更好通过实际测试的重新装载功能，但这就足够了对我来说现在。:)

Answer 10

简单地取代的 src 属性的框架元素并不令人满意，在我的情况，因为一个会看到旧的内容，直到新的页面装载。这一工作更好的如果你想得到即时的视觉的反馈：

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 10);

Answer 11

在IE8使用。净额，设置 iframe.src 第一次是确定的， 但设定 iframe.src 第二次是不是升高 page_load 的iframed页。为了解决它，我用的 iframe.contentDocument.location.href = "NewUrl.htm".

发现它的时候用的jQuery thickBox，并试图重新打开同一页上在thickbox面.那么它只是表明，早期网页，被打开了。

Answer 12

使用重载即和设src其他浏览器。(重新加载不上的工作FF) 测试即7、8、9和火狐

if(navigator.appName == "Microsoft Internet Explorer"){
    window.document.getElementById('iframeId').contentWindow.location.reload(true);
}else {
    window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src;
}

Answer 13

你有没有考虑追加的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>

它不会看到如果你是知道的参数被安全，那么它应该被罚款。

Answer 14

如果你使用Jquery然后有一行代码。

$('#iframeID',window.parent.document).attr('src',$('#iframeID',window.parent.document).attr('src'));

如果您使用的是同样的父母然后

$('#iframeID',parent.document).attr('src',$('#iframeID',parent.document).attr('src'));

Answer 15

现在做这个工作上的铬66个，试试这个：

const reloadIframe = (iframeId) => {
    const el = document.getElementById(iframeId)
    const src = el.src
    el.src = ''
    setTimeout(() => {
        el.src = src
    })
}

Answer 16

如果所有上述不为你工作：

window.location.reload();

这对于某些原因我的刷新框架而不是整个剧本。也许是因为它被放置在该框架本身，而所有这些getElemntById解决方案的工作时，你试图刷新的框架的另一个框架？

或者，我不明白这完全帮你胡言乱语，反正这个工作对我来说就像一个魅力:)

Answer 17

使用 self.location.reload() 将重新装载的框架.

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />

Answer 18

<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 

Answer 19

如果你尝试了所有的其他建议，并且不能得到任何的他们的工作(如我无法)，这里的东西你可以试，可能是有用的。

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);
});

---

我最初的尝试，并保存一段时间后轮驱动和跨浏览器试验。我想创建一个快速页，里面一堆的内部框架，组织成团体，我将显示的意愿。从逻辑上你会希望能够很容易和很快刷新任何给定的框架。

我应该注意的项目，我工作上的目前，一个在用在这个试验台，是一页纸的网站编制索引的地点(例如索引。html#家)。这可能有一些与我为什么不能得到任何其他的解决方案，以更新我的特定框架。

说了这番话之后，我知道这是不干净的事情在这个世界，但它的工作原理我的目的。希望这可以帮助别人。现在如果我能找出如何保持该框架的滚动父页，每次有内部动画面...

编辑： 我意识到，这并不"刷新"的框架就像我希望的那样。它将重新装载框架的最初来源。仍然找不出为什么我不能获得任何其他选项的工作。

更新： 原因我不能获得任何其他方法工作是因为我正测试他们在铬、铬不会让你访问一个框架的内容(说明： 它是有可能的是未来的版本的铬支持contentWindow/如果要当面负载一个当地html文件从当地html文件？)如果它不来自同一位置(到目前为止，我理解它)。在进一步测试，我不能访问contentWindow在FF。

经修正的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);
    }
});

Answer 20

进行调试的目的之一可能打开控制台改变执行方面的框架，他希望刷新和做 document.location.reload()

Answer 21

另一种解决方案。

const frame = document.getElementById("my-iframe");

frame.parentNode.replaceChild(frame.cloneNode(), frame);