[Risolto][HTML/JS] Cambiare url/src iframe

MoonDragon

Salve, sto cercando di creare una pagina offline che mi permetta di vedere in contemporanea 3 siti, ma volendo cambiare l'ordine in base al contenuto del momento ho pensato di usare uno script per cambiare l' url/src dell'iframe.
In teoria penso sia giusto ma non funziona

Ho due file principali, un css e due immagini:
index.html

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="stile2.css">
 </head>
 <body>
  <div id="container">
   <table style="width:100%">
    <tr>
    <th rowspan="2"> <iframe allowfullscreen=true loading=lazy id="alto" style="width:100%" src="scegli.html" title="description"></iframe> </th>
    <td> <iframe allowfullscreen=true loading=lazy id="basso" style="width:100%" src="scegli.html" title="description"></iframe></td>
    </tr>
    <tr>
    <td> <iframe allowfullscreen=true loading=lazy id="basso" style="width:100%" src="scegli.html" title="description"></iframe> </td>
    </tr>
   </table>
 <div>
</body>
</html>

scegli.html

Codice: Seleziona tutto

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="stile2.css">

  <script type="text/javascript">
  function newSrc() {
  var e = document.getElementByid("Menu");
  var newSrc = e.options[e.selectedIndex].value;
  document.getElementByid("play").src=newSrc;
  }
  </script>
 </head>
  <body>
   <center>
    <button onClick="newSrc();">Cambia sito</button> 
    <select id="Menu">
     <option value="https://www.raiplay.it/dirette/rai2">Rai 2</option>
     <option value="https://www.raiplay.it/dirette/raisport">Rai Sport</option>
     <option value="https://olympics.com/it/paris-2024/calendario">Calendario</option>
    </select>
   <BR>
   <iframe allowfullscreen=true id="play" frameborder="0" style="width:100%;overflow:scroll;" src="trasparente.png"></iframe>
   </center>
 </body>
</html>

stile2.css

Codice: Seleziona tutto

div#container
{
	width:100%;
	height:100%;
	margin:0 auto;
	text-align:center;

}
iframe#alto {
	 height: 930px; 
}
iframe#basso {
	 height: 460px;
}
iframe#play {
	 height: 100vh; 
	border: 0px 
    frameborder: 0
	border: 0px;
}
table {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	background: url(ink.jpg)
}

ink.jpg
trasparente.png
Anteprima:

Qualcuno sa come aiutarmi a farlo funzionare?

dan74 · Messaggio da **dan74** » mercoledì 4 settembre 2024, 2:46

ciao MoonDragon,
c'è un errore nel codice javascript.
non hai messo Id con la I maiuscola nella variabile e, e nel document.getElementByid("play").src

Codice: Seleziona tutto

//errato
function newSrc() {
  var e = document.getElementByid("Menu");
  var newSrc = e.options[e.selectedIndex].value;
  document.getElementByid("play").src = newSrc;
  } 

//corretto
function newSrc() {
  var e = document.getElementById("Menu");
  var newSrc = e.options[e.selectedIndex].value;
  document.getElementById("play").src = newSrc;
  }

MoonDragon

dan74 ha scritto: ↑
mercoledì 4 settembre 2024, 2:46
ciao MoonDragon,
c'è un errore nel codice javascript.
non hai messo Id con la I maiuscola nella variabile e, e nel document.getElementByid("play").src

Grazie mille

,
Ciao

dan74

prego !!!
se metti tutto on-line mandami il link !!!
ciao

Forum Ubuntu-it