หากคุณลองใช้คำแนะนำอื่น ๆ ทั้งหมดและไม่สามารถทำงานให้ได้ (อย่างที่ทำไม่ได้) นี่เป็นสิ่งที่คุณสามารถลองได้ซึ่งอาจเป็นประโยชน์
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 และการทดสอบข้ามเบราว์เซอร์ ฉันต้องการสร้างหน้าเว็บด่วนที่มี iframe จำนวนหนึ่งจัดเรียงเป็นกลุ่มที่ฉันจะแสดง / ซ่อนตามประสงค์ เหตุผลคุณต้องสามารถรีเฟรชเฟรมที่กำหนดได้อย่างง่ายดายและรวดเร็ว
ฉันควรทราบว่าโครงการที่ฉันกำลังดำเนินการอยู่ในขณะนี้โครงการที่ใช้งานอยู่ในเตียงทดสอบนี้เป็นเว็บไซต์หนึ่งหน้าที่มีตำแหน่งที่จัดทำดัชนี (เช่น index.html # home) อาจมีบางสิ่งที่เกี่ยวข้องกับสาเหตุที่ฉันไม่สามารถแก้ไขปัญหาอื่น ๆ เพื่อรีเฟรชเฟรมเฉพาะของฉันได้
ต้องบอกว่าฉันรู้ว่าไม่ใช่สิ่งที่สะอาดที่สุดในโลก แต่ทำงานได้ตามวัตถุประสงค์ของฉัน หวังว่านี่จะช่วยใครซักคน ตอนนี้ถ้าฉันสามารถคิดได้ว่าจะป้องกันไม่ให้ iframe เลื่อนหน้าหลักในแต่ละครั้งที่มีภาพเคลื่อนไหวอยู่ใน iframe ...
แก้ไข:
ฉันรู้ว่านี่ไม่ใช่ "รีเฟรช" iframe เหมือนที่ฉันคาดหวัง มันจะโหลดซ้ำแหล่งที่มาเริ่มต้นของ iframe ยังไม่สามารถเข้าใจได้ว่าทำไมฉันจึงไม่สามารถใช้ตัวเลือกอื่น ๆ ในการทำงานได้ ..
อัปเดต:
เหตุผลที่ฉันไม่สามารถใช้วิธีการอื่นได้เนื่องจากฉันทดสอบใน Chrome และ Chrome จะไม่อนุญาตให้คุณเข้าถึงเนื้อหาของ iframe (คำอธิบาย: เป็นไปได้หรือไม่ว่า Chrome จะรองรับเนื้อหาในอนาคต Windows ในอนาคต / contentDocument เมื่อ iFrame โหลดไฟล์ 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);
}
});
srcคุณลักษณะเพื่อตัวเองไม่สะอาด? ดูเหมือนว่าจะเป็นทางออกเดียวที่ใช้ได้กับเบราว์เซอร์และข้ามโดเมน