Обновление пути src для iframe с использованием раскрывающегося списка HTML - PullRequest
Новая
       60

Обновление пути src для iframe с использованием раскрывающегося списка HTML

0 голосов
/ 09 октября 2019

Я пытаюсь использовать элемент формы HTML (в частности, раскрывающийся список), чтобы обновить путь URL для встроенного в страницу iframe. Это должно перезагружать iframe каждый раз, когда делается другой выбор.

Я попробовал следующее, используя функцию Javascript, чтобы передать значение select, когда происходит событие onkeyup или onmouseup, но я не вижу никаких измененийкогда это происходит: 

<!DOCTYPE html>

<head>

<style>

* {font-family: arial;}

</style>
<script type="text/javascript">

window.onload = function() {
  document.monthyear.onkeyup = my;
  document.monthyear.onmouseup = my;

};

function my() {

var my = String(document.monthyear.value);

document.getElementById("iframe").src = my;

};

</script>

</head>

<body>

<select name="monthyear">
    <option value="/258001">
        January 2019
    </option>
    <option value="/258002">
        February 2019
    </option>
    <option value="/258003">
        March 2019
    </option>
    <option value="/258004">
        April 2019
    </option>
</select>

<h1>Month</h1><iframe allowfullscreen frameborder="0" height="450" id="iframe" src="https://www.example.com/258001" style="border:0" width="800"></iframe>

Ответы [ 2 ]

0 голосов
/ 09 октября 2019

Попробуйте использовать вот так: 

 <select onchange='this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);'>
  <a href='#'><option>choose an action</option></a>
  <option value='Url or div'>Option 1</option>
  <option value='Url or div'>Option 2</option>

  </select>
0 голосов
/ 09 октября 2019

Установите значение по умолчанию для тега выбора с помощью атрибута selected, а затем (см. Комментарии в коде) ... 

<script>
const select = document.querySelector('#select')
window.onload = function() {
  // set the iframe value to default select value
  document.getElementById("iframe").src = '/258001'
};
// add an event listener that listens for a change to the input and sets the iframe path.
select.addEventListener('change', (e) => {
 document.getElementById("iframe").src = e.target.value
document.getElementById("iframe").contentWindow.location.reload()
})

</script>

</head>

<body>

<select id="select" name="monthyear">
    <option value="/258001" selected="selected">
        January 2019
    </option>
    <option value="/258002">
        February 2019
    </option>
    <option value="/258003">
        March 2019
    </option>
    <option value="/258004">
        April 2019
    </option>
</select>

<h1>Month</h1><iframe allowfullscreen frameborder="0" height="450" id="iframe" src="https://www.example.com/258001" style="border:0" width="800"></iframe>
...