CODEWITHSUNDEEP
javascripthtmlcssbuttoniframe
user1373771
user1373771

Reputation: 299

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 the parent page and the iframe name is "Right".

Upvotes: 16

Views: 45183

Answers (2)

Fabrício Matté
Fabrício Matté

Reputation: 70199

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

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

We can do it with a function call:

HTML

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

JS

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

Or with inline JS:

<button onclick="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);
}

function refreshIframe() {
    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.

Upvotes: 27

Dips
Dips

Reputation: 3290

Add new id in your iframe and try below code.

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

Upvotes: -3

Related Questions