จะรีเฟรช IFrame โดยใช้ Javascript ได้อย่างไร?


121

ฉันมีหน้าเว็บที่มี IFrame และปุ่มเมื่อกดปุ่มแล้วฉันต้องรีเฟรช IFrame เป็นไปได้หรือไม่ถ้าเป็นไปได้อย่างไร ฉันค้นหาและไม่พบคำตอบใด ๆ


คำตอบ:


152
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;

2
มันใช้ได้กับฉันใน Chrome เวอร์ชันนี้:Version 24.0.1312.56 Ubuntu 12.04 (24.0.1312.56-0ubuntu0.12.04.1)
Paul A Jungwirth

3
FYI - ปัจจุบัน (ณ เดือนมกราคม 2013) มีข้อบกพร่องของโครงการ Chromium ( code.google.com/p/chromium/issues/detail?id=172859 ) ซึ่งทำให้การอัปเดต iframe ถูกเพิ่มลงในประวัติเอกสาร
Robert Altman

หากใน iFrame เปลี่ยนหน้าวิธีนี้จะสูญเสียการนำทาง
Eduardo Cuomo

10
var tmp_src = iframe.src; iframe.src = ''; iframe.src = tmp_src;
lyfing

2
นี่ทำงานได้อย่างสมบูรณ์แบบสำหรับฉันใน chromedocument.getElementById('frame_id').contentDocument.location.reload(true);
Haseeb Zulfiqar

104

สิ่งนี้จะช่วยได้:

document.getElementById('FrameID').contentWindow.location.reload(true);

แก้ไข: แก้ไขชื่อวัตถุตามความคิดเห็นของ @ Joro


3
สิ่งนี้ไม่ทำงานใน IE9 คุณควรใช้ contentWindow แทน contentDocument
gotqn

1
ขอบคุณสำหรับคำตอบ. นอกจากนี้หากคุณต้องทำให้เกิดการรีเฟรชหน้าอื่นไปยังอีกหน้าหนึ่งภายใน iframe แทนคุณreload(true)จะใช้สิ่งนี้:document.getElementById('FrameID').contentWindow.location.replace(new_url);
racl101

15
สิ่งนี้ใช้ไม่ได้กับ iframe ที่มีต้นกำเนิดต่างกัน (โปรโตคอลชื่อโฮสต์หรือพอร์ต)
michelpm

18

หาก iframe โหลดจากโดเมนเดียวกันคุณสามารถทำได้ซึ่งเหมาะสมกว่าเล็กน้อย:

iframe.contentWindow.location.reload();




2

2017:

หากอยู่ในโดเมนเดียวกันให้ทำดังนี้

iframe.contentWindow.location.reload();

จะทำงาน.


1

นี่คือข้อมูลโค้ด HTML:

<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>

และรหัส Javascript ของฉัน:

window.onload = function(){
setInterval(function(){
    parent.frames['idFrame'].location.href = "chat.txt";
},1000);}

1

การรีเซ็ตแอตทริบิวต์ src โดยตรง:

iframe.src = iframe.src;

การรีเซ็ต src ด้วยการประทับเวลาสำหรับการป้องกันแคช:

iframe.src =  iframe.src.split("?")[0] + "?_=" + new Date().getTime();

การล้าง src เมื่อตัวเลือกสตริงการสืบค้นไม่สามารถทำได้ (URI ข้อมูล):

var wasSrc = iframe.src

iframe.onload = function() {
    iframe.onload = undefined;
    iframe.src = wasSrc;
}

1

หากคุณใช้เส้นทางแฮช (เช่น mywebsite.com/#/my/url) ซึ่งอาจไม่รีเฟรชเฟรมเมื่อสลับแฮช:

<script>
    window.onhashchange = function () {
        window.setTimeout(function () {
            let frame = document.getElementById('myFrame');
            if (frame !== null) {frame.replaceWith(frame);}
        }, 1000);
    }
</script>

ขออภัยหากคุณไม่ใช้ JS ระยะหมดเวลาอาจพยายามแทนที่เฟรมก่อนที่หน้าจะโหลดเนื้อหาเสร็จสิ้น (ดังนั้นการโหลดเนื้อหาเก่า) ฉันยังไม่แน่ใจเกี่ยวกับวิธีแก้ปัญหา


0

หากคุณมีหลาย iFrames ภายในเพจสคริปต์นี้อาจมีประโยชน์ ฉันคิดว่ามีค่าเฉพาะในแหล่งที่มาของ iFrame ซึ่งสามารถใช้เพื่อค้นหา iFrame เฉพาะได้

var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
    var source =  iframes[i].attributes.src.nodeValue;
    if(source.indexOf('/yourSorce') > -1){
        yourIframe = iframes[i];
    }   
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;

แทนที่ "/ yourSource" ด้วยค่าที่คุณต้องการ


0

หาก URL ของ iframe ของคุณไม่เปลี่ยนแปลงคุณสามารถสร้างขึ้นใหม่ได้

หาก iframe ของคุณไม่ได้มาจากต้นกำเนิดเดียวกัน (โครงร่างโปรโตคอลชื่อโฮสต์และพอร์ต) คุณจะไม่สามารถทราบ URL ปัจจุบันใน iframe ได้ดังนั้นคุณจะต้องมีสคริปต์ในเอกสาร iframe เพื่อแลกเปลี่ยนข้อความกับหน้าต่างหลัก ( หน้าต่างของเพจ)

ในเอกสาร iframe:

window.addEventListener('change', function(e) {
  if (e.data === 'Please reload yourself') {
    var skipCache = true; // true === Shift+F5
    window.location.reload(skipCache);
  }
}

ในเพจของคุณ:

var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);

-2

คุณสามารถใช้สิ่งนี้:

js:

function refreshFrame(){
    $('#myFrame').attr('src', "http://blablab.com?v=");
}

Html:

`<iframe id="myFrame" src=""></iframe>`

JS Fiddle: https://jsfiddle.net/wpb20vzx/


1
คำถามไม่มีส่วนเกี่ยวข้องกับไลบรารี JavaScript ยอดนิยมที่เรียกว่า jQuery
John Weisz

Math.round () จะทำอะไร? ที่นี่ดูไร้ประโยชน์โดยสิ้นเชิง
Davide R.

สวัสดีฉันใช้ Math.round () เนื่องจากเบราว์เซอร์บางตัวสามารถแคช URL - หน้าการรีเฟรชจึงไม่ทำงาน
Ferhat KOÇER
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.