Кнопка перезагрузки Iframe

Я смотрел на многих веб-сайтах, но ни один из них не работает правильно или я их не понимаю. Я хотел бы простую кнопку, которая обновляет определенный iframe. Кнопка будет находиться на родительской странице, а имя iframe - "правильно".

9
button css html iframe javascript

2 ответов

есть много способов сделать это. Предполагая это iframe разметка:

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

мы можем сделать это с помощью вызов функции:

HTML-код

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

JS

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

или inline JS:

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

или событие слушатель!--13-->:

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

то же, что и выше, теперь С поддержкой IE вместо анонимные:

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

все это, даже не касаясь jQuery или любой другой библиотеки.

который из этих Вы следует использовать? Какой вы считаете более ремонтопригодным и читаемым. Просто избегайте глобальных vars, когда это возможно. Я бы лично избегал встроенных JS с разметкой, и слушатели кажутся ненужными, но это только я. Выбирай, что тебе больше подходит.

17

Добавить новый id в вашем iframe и попробуйте ниже кода.

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