Javascript-форум - innerHTML из <iframe> по событию onchange тега <select>

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - innerHTML из <iframe> по событию onchange тега <select> (https://javascript.ru/forum/events/48567-innerhtml-iz-iframe-po-sobytiyu-onchange-tega-select.html)

innerHTML из <iframe> по событию onchange тега <select>

Добрый день! Мой код:

<select id="s1" name="s1">
    <option>1111</option>
    <option>2222</option>
    <option>3333</option>
    <option>4444</option>
    <option>5555</option>
    <option>6666</option>
</select>
<iframe id="myframe" name="myframe"></iframe>
<p name='pr' id='pr'>1234</p>
<script>
function prov(){
var stroka='/text' + s1.selectedIndex + '.html';
document.getElementById("myframe").src = stroka;
var frm=document.getElementById("myframe").contentDocument.body.innerHTML;
pr.innerHTML=frm;
}
s1.onchange = prov;
</script>

Смысл: по событию onchange в зависимости от выбранной опции должен текст html документа должен отобразиться в абзаце.
Обрабатывается с запаздыванием, т.е. в переменную stroka присваивается текст, который содержится в iframe до запуска функции, а не который присваивается в процессе выполнения функции.
При этом если написать так:

<select id="s1" name="s1">
    <option>1111</option>
    <option>2222</option>
    <option>3333</option>
    <option>4444</option>
    <option>5555</option>
    <option>6666</option>
</select>
<iframe id="myframe" name="myframe"></iframe>
<p name='pr' id='pr'>1234</p>
<script>
function prov(){
var stroka='/text' + s1.selectedIndex + '.html';
document.getElementById("myframe").src = stroka;
alert("chto ugodno");
var frm=document.getElementById("myframe").contentDocument.body.innerHTML;
pr.innerHTML=frm;
}
s1.onchange = prov;
</script>

То работает как надо.
Подскажите в чем дело. Я только начинаю познавать JS

PS Извиняюсь за такое название темы. Не нашел как его изменить после создания

Понять не могу, почему наличие alert влияет на результат

для начала, то если судить по твоему коду s1 у нас берется из воздуха. Где определена эта переменная?
Вобщем ясно как белый день что выше по коду ты определяешь в переменную s1 свой селект, а s1.selectedIndex - значение выбранного оптиона. И закономерно получаешь каждый раз одно и то же значение.
Его надо вычислять во время выполнения функции prov()

Спасибо за ваше мнение. Вроде как разобрался. По-моему проблема была в том, что файл html не успевал подгрузиться в iframe. Чуть переписал код с использованием setTimeout и заработало.

Когда это возможно, лучше использовать колбэк на onload, чем костыль с setTimeout.

Цитата:

Сообщение от BETEPAH (Сообщение 320167)

Когда это возможно, лучше использовать колбэк на onload, чем костыль с setTimeout.

Не могли бы по подробнее о чем речь???

Arcon,

<iframe id="myframe" name="myframe" onload="myFunction()"></iframe>

Премного благодарен! Здорово работает. Я не думал что при изменении src для iframe происходит событие load

Цитата:

Сообщение от BETEPAH (Сообщение 320191)

Arcon,

<iframe id="myframe" name="myframe" onload="myFunction()"></iframe>

Все-таки возникла проблема: Теперь содержимое обазаца, в который я вставляю текст из iframe отображается правильно, но при этом оно постоянно обновляется (даже визуально заметно мерцает немного и ссылки, которые в нем есть, на нажатия не реагируют) , видно как постоянно крутится индикатор загрузки страницы.
Код теперь выглядит так:

<p><select id="s1" name="s1">
<option>1111</option>
<option>2222</option>
<option>3333</option>
<option>4444</option>
<option>5555</option>
<option>6666</option> 
</select>
<iframe id="myframe" name="myframe" onload="prov()" >Ваш браузер не поддерживает iframe</iframe></p>

<p id="pr" name="pr">1234</p>
<script>
function zapis(){
var frm=document.getElementById("myframe").contentDocument;
pr.innerHTML=frm.body.innerHTML;
}
function prov(){
var s1=document.getElementById("s1")
var stroka='/text' + s1.selectedIndex+ '.html';
document.getElementById("myframe").src = stroka;
zapis()
}
</script>

Если не сложно поясните, пожалуйста, как работает onload в данном случае. Везде пишут, что событие срабатывает, когда полностью загружается страница

Цитата:

Сообщение от Arcon

Так и есть. Но Вы же вызываете после загрузки функцию prov, а она в 20й строке задает ифрейму src и происходит перезагрузка фрейма. И так по кругу