Iframe Reload Button

I have looked on many websites but none of them seem to work right or I don't understand them. I would like a simple button that refreshes a certain iframe. The button would be on

Solution 1:

There are many ways to do this. Assuming this iframe markup:

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

We can do it with a function call:

HTML

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

JS

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

Or with inline JS:

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

Or using an 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;
    });
}

Same as above, now with support for IE <= 8 and using a function in the global scope as handler instead of an anonymous one:

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

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

All of this without even touching jQuery or any other library.

Which of these you should use? Whichever you consider more maintainable and readable. Just avoid global vars whenever possible. I'd personally avoid inline JS with the markup, and the listeners seem to be unnecessary, but that's just me. Choose whichever suits you better.

Solution 2:

Add new id in your iframe and try below code.

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