โหลด iframe อีกครั้งด้วย jQuery

ฉันมี iframe สองอันบนหน้าหนึ่งและอีกอันหนึ่งทำการเปลี่ยนแปลง แต่ iframe อื่นไม่แสดงการเปลี่ยนแปลงจนกว่าฉันจะรีเฟรช มีวิธีง่ายๆในการรีเฟรช iframe นี้ด้วย jQuery หรือไม่?

<div class="project">
  <iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>

หาก iframe ไม่ได้อยู่ในโดเมนอื่นคุณสามารถทำสิ่งนี้:

document.getElementById(FrameID).contentDocument.location.reload(true);

แต่เนื่องจาก iframe อยู่ในโดเมนที่แตกต่างกันคุณจะถูกปฏิเสธการเข้าถึงcontentDocumentคุณสมบัติของ iframe ด้วยนโยบายต้นทางเดียวกัน

แต่คุณสามารถบังคับ iframe ข้ามโดเมนให้โหลดซ้ำหากรหัสของคุณทำงานบนหน้าหลักของ iframe โดยการตั้งค่าให้เป็น src attribute แบบนี้:

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

หากคุณพยายามโหลด iframe จาก iframe อื่นแสดงว่าคุณโชคไม่ดีที่เป็นไปไม่ได้

$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

คุณยังสามารถใช้ jquery นี่เป็นสิ่งเดียวกับที่ Alex เสนอให้โดยใช้ JQuery:

 $('#currentElement').attr("src", $('#currentElement').attr("src"));

โหลด iframe อีกครั้งด้วย jQuery

สร้างลิงก์ใน iframe ให้พูดด้วย id = "reload" จากนั้นใช้รหัสต่อไปนี้

$('#reload').click(function() {
    document.location.reload();
});

และคุณก็พร้อมใช้งานทุกเบราว์เซอร์

โหลด iframe ด้วย HTML (ไม่มีจาวาสคริปต์ที่ต้องการ)

มันมีทางออกที่ง่ายกว่า: ซึ่งทำงานได้โดยไม่ต้องมีจาวาสคริปต์ใน (FF, Webkit)

เพียงแค่สมอในด้าน iframe ของคุณ

   <a href="#" target="_SELF">Refresh Comments</a>

เมื่อคุณคลิกจุดยึดนี้เพียงรีเฟรช iframe ของคุณ

แต่ ถ้าคุณมีพารามิเตอร์ที่ส่งไปยัง iframe ของคุณให้ทำดังนี้

  <a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a>

ไม่ต้องการ URL หน้าใด ๆ เพราะ -> target = "_ SELF" ทำเพื่อคุณ

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

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

เพียงตอบกลับคำตอบของ Alex แต่ด้วย jQuery

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);

นี่คือวิธีอื่น

$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );

ฉันค่อนข้างมั่นใจว่าทุกตัวอย่างด้านบนโหลด iframe ใหม่ด้วย src ดั้งเดิมไม่ใช่ URL ปัจจุบัน

$('#frameId').attr('src', function () { return $(this).contents().get(0).location.href });

ควรโหลดซ้ำโดยใช้ URL ปัจจุบัน

หากคุณเป็นข้ามโดเมนเพียงแค่ตั้งค่า src กลับไปที่ url เดียวกันจะไม่เรียกการโหลดซ้ำแม้ว่าการแฮชตำแหน่งจะเปลี่ยนไปก็ตาม

พบปัญหานี้ในขณะที่สร้าง iframes ปุ่ม Twitter ด้วยตนเองซึ่งจะไม่รีเฟรชเมื่อฉันอัปเดต URL

ปุ่ม 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 () นี้ทำงานตามที่คาดไว้ ยังดีที่ไม่ได้มีการจับเวลา

เพียงตอบกลับคำตอบของ Alex แต่ด้วย jQuery:

var e = $('#myFrame');
    e.attr("src", e.attr("src"));

หรือคุณสามารถใช้ฟังก์ชั่นขนาดเล็ก:

function iframeRefresh(e) {
    var c = $(e);
        c.attr("src", c.attr("src"));
}

ฉันหวังว่ามันจะช่วย

$('IFRAME#currentElement').get(0).contentDocument.location.reload()

สิ่งนี้เป็นไปได้ด้วยจาวาสคริปต์ง่าย ๆ

• ใน iFrame1 สร้างฟังก์ชัน JavaScript ที่เรียกว่าใน body body onload ฉันได้ตรวจสอบตัวแปรฝั่งเซิร์ฟเวอร์ที่ฉันตั้งค่าแล้วดังนั้นจึงไม่พยายามเรียกใช้ฟังก์ชัน JavaScript ใน iframe2 เว้นแต่ว่าฉันได้ดำเนินการเฉพาะใน iframe1 คุณสามารถตั้งค่านี้เป็นฟังก์ชั่นที่เกิดขึ้นจากการกดปุ่มหรือคุณต้องการใน iframe1
• จากนั้นใน iframe2 คุณมีฟังก์ชั่นที่สองที่ฉันแสดงอยู่ด้านล่าง โดยทั่วไปฟังก์ชันใน iframe1 จะไปที่หน้าพาเรนต์แล้วใช้window.framesไวยากรณ์เพื่อเรียกใช้ฟังก์ชัน JavaScript ใน iframe2 เพียงให้แน่ใจว่าการใช้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();
}

// รีเฟรช iframes ทั้งหมดในหน้า

var f_list = document.getElementsByTagName('iframe');

 for (var i = 0, f; f = f_list[i]; i++) {
                            f.src = f.src;
                        }

    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

โซลูชันข้ามเบราว์เซอร์คือ:

    ifrX.src = ifrX.contentWindow.location

สิ่งนี้มีประโยชน์โดยเฉพาะอย่างยิ่งเมื่อ <iframe> เป็นเป้าหมายของ <form>

แก้ไข! ฉันลงทะเบียนเพื่อ stockoverflow เพียงเพื่อแบ่งปันวิธีแก้ปัญหาเดียวให้คุณ (อย่างน้อยใน ASP.NET/IE/FF/Chrome) ที่ใช้งานได้! แนวคิดคือการแทนที่ค่า innerHTML ของ div ด้วยค่า 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;
}

หวังว่านี่จะช่วยได้

คุณต้องใช้

[0] .src

เพื่อค้นหาแหล่งที่มาของ iframe และ URL นั้นต้องอยู่ในโดเมนเดียวกันของพาเรนต์

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}

คุณสามารถทำได้เช่นนี้

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });

วิธีการแก้ปัญหาด้านล่างจะทำงานได้อย่างแน่นอน:

window.parent.location.href = window.parent.location.href;