Nút tải lại khung nội tuyến

Question

Tôi đã xem xét nhiều trang web nhưng không có trang web nào có vẻ hoạt động đúng hoặc tôi không hiểu chúng. Tôi muốn một nút đơn giản làm mới một khung nội tuyến nhất định. Nút sẽ nằm trên trang cha và tên khung nội tuyến là "Phải".

Answer 1

Có nhiều cách để thực hiện việc này. Giả sử iframe dấu sau:

<iframe name="Right" src="http://www.example.com"></iframe> 

Chúng ta có thể làm điều đó với một function call:

HTML

<button onclick="refreshIframe();">Refresh Iframe</button> 

JS

function refreshIframe() { 
    var ifr = document.getElementsByName('Right')[0]; 
    ifr.src = ifr.src; 
} 

Hoặc với inline JS:

<button onclick="var ifr=document.getElementsByName('Right')[0]; ifr.src=ifr.src;">Refresh Iframe</button> 

Hoặc sử dụng một event listener:

HTML

<button id="iframeRefresher">Refresh Iframe</button> 

JS

window.onload = function() { 
    document.getElementById('iframeRefresher').addEventListener('click', function() { 
     var ifr = document.getElementsByName('Right')[0]; 
     ifr.src = ifr.src; 
    }); 
} 

Tương tự như trên, không có w with support for IE <= 8 and using a function in the global scope as handler thay vì một ẩn danh một:

HTML

<button id="iframeRefresher">Refresh Iframe</button> 

JS

window.onload = function() { 
    var refresherButton = document.getElementById('iframeRefresher'); 
    if (refresherButton.addEventListener) 
     refresherButton.addEventListener('click', refreshIframe, false); 
    else 
     refresherButton.attachEvent('click', refreshIframe); 
} 

function refreshIframe() { 
    var ifr = document.getElementsByName('Right')[0]; 
    ifr.src = ifr.src; 
} 

Tất cả điều này mà không cần chạm vào jQuery hoặc bất kỳ thư viện khác.

Bạn nên sử dụng loại nào trong số này? Cho dù bạn xem xét nhiều hơn và có thể đọc được. Chỉ cần tránh các vars toàn cầu bất cứ khi nào có thể. Cá nhân tôi muốn tránh nội tuyến JS với đánh dấu, và người nghe dường như không cần thiết, nhưng đó chỉ là tôi. Chọn bất cứ điều gì phù hợp với bạn tốt hơn.

Answer 2

Thêm mới id trong khung nội tuyến của bạn và thử mã bên dưới.

var iframe = document.getElementById('FrameId'); 
$("button").click(function() { 
    iframe.src = iframe.src; 
}):