HTML Dateiname aus Variable übergeben
Hallo,
ich möchte in einem kleinen HTML-Script eine Datei in einem inline-Frame anzeigen, der Dateiname soll dabei aus den Formulareingaben generiert werden.
Den Dateinamen kann ich ermittlen, aber die Datei nicht anzeigen - wie kann ich den Dateinamen übergeben?
Ich habe ein vereinfachtes Demoscript erstellt:
** DEMO CODE NICHT VORHANDEN
In dieser Zeile liegt mein Problem:
Ich möchte nach Möglichkeit ohne PHP auskommen.
Idealerweise würde noch eine Fehlerseite gezeigt, wenn die angeforderte Datei nicht vorhanden ist.
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Iframe spielerrei</title>
<style>
body{
background:#E7E7E7;
}
#form_abfrage{
display:flex;
}
.wrapper{
width:90%;
max-width:1200px;
margin:0 auto
}
.display{
position:relative;
left:0px;
height:600px;
}
div{
background-repeat:no-repeat;
background-size:100%;
overflow:hidden
}
iframe{
transform:scale(0.219);
transform-origin:top left;
margin:0;
padding:0;
position:relative;
background-color:#fff;
border-color:#000
}
.mobile{
background-image:url("/image/iphone-optimised.png");
position:absolute;
width:95px;
height:196px;
top:375px;
left:300px;
z-index:5
}
.mobile iframe{
width:320px;
height:480px;
top:32px;
left:11px;
overflow-y:hidden
}
.tablet{
background-image:url("/image/ipad-optimised.png");
width:246px;
height:400px;
z-index:3;
position:absolute;
left:120px;
top:230px
}
.tablet iframe{
width:768px;
height:1024px;
top:35px;
left:38px;
overflow-y:hidden
}
.laptop{
background-image:url("/image/laptop-screen-optimised.png");
width:477px;
height:307px;
top:264px;
left:560px;
position:absolute;
z-index:2
}
.laptop iframe{
width:1280px;
height:802px;
top:26px;
left:60px;
transform:scale(0.277);
transform-origin:top left;
}
.desktop{
position:absolute;
width:566px;
height:538px;
background-image:url("/image/large-screen-optimised.png");
top:0px;
left:220px;
z-index:1
}
.desktop iframe{
left:28px;
top:38px;
width:1600px;
height:992px;
transform:scale(0.3181);
transform-origin:top left;
}
@media (max-width: 1160px){
.display{
width:95%;
height:550px;
transform:scale(0.81);
}
.desktop{
left:180px
}
.laptop{
left:520px
}
.tablet{
left:80px
}
.mobile{
left:260px
}
}
@media (max-width: 1070px){
.display{
left:-50px
}
}
@media (max-width: 1000px){
.display{
height:500px;
transform:scale(0.71);
top:-40px
}
.desktop{
left:140px
}
.laptop{
left:480px
}
.tablet{
left:40px
}
.mobile{
left:220px
}
}
@media (max-width: 850px){
.display{
height:500px;
transform:scale(0.65);
}
.desktop{
left:100px
}
.laptop{
left:440px
}
.tablet{
left:0px
}
.mobile{
left:180px
}
}
@media (max-width: 768px){
.display{
height:450px;
transform:scale(0.55);
}
}
@media (max-width: 670px){
.display{
height:400px;
left:-70px;
transform:scale(0.45);
}
}
@media (max-width: 560px){
.display{
height:270px;
top:-65px;
transform:scale(0.37);
}
}
@media (max-width: 440px){
.display{
left:-17px;
top:-65px;
width:70px;
transform:scale(0.35);
}
}
@media (max-width: 380px){
.display{
height:235px;
left:-17px;
top:-65px;
width:70px;
transform:scale(0.27);
}
.desktop{
left:100px
}
.laptop{
left:515px
}
.tablet{
left:0px
}
.mobile{
left:180px
}
}
</style>
</head>
<body>
<h2>Mein grosser Test</h2>
<div id="form_abfrage">
<select id="wertung">
<option value="Tag_html" checked>Tageswertung</option>
<option value="Woche_html"> Wochenwertung</option>
<option value="Monat_html">Monatswertung</option>
<option value="Jahr_html">Jahreswertung</option>
</select>
<label>Gruppe </label>
<select size="1" id="gruppe" name="Gruppe">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="button" id="los" value="öffne Seite"></div>
<div id="info"></div>
<main class="ami">
<div class="wrapper">
<section class="display">
<div class="mobile ui-draggable">
<div class="trim">
<iframe id="mobile" src=""></iframe>
</div>
</div>
<div class="tablet ui-draggable">
<div class="trim">
<iframe id="tablet" src=""></iframe>
</div>
</div>
<div class="laptop ui-draggable">
<div class="trim">
<iframe id="laptop" src=""></iframe>
</div>
</div>
<div class="desktop ui-draggable">
<div class="trim">
<iframe id="desktop" src=""></iframe>
</div>
</div>
</section>
</div>
<p>Teste deine Homepage auf den verschieden Endgeräten</label><br>
<span>Webseite<input type="text" id="your_seite" value=""></span>
<input type="button" id="openseite" value="Seite anzeigen">
<script>
// Warten Bis der Dom Geladen ist
document.addEventListener('DOMContentLoaded', async function () {
// Domian in Variable schreiben
var hauptlink='https://sebastian1012.bplaced.net/api-weiterleitung/codepen_back.php'; // Deine Homepage
// Click Event für den Button
var open_button=document.getElementById('los').addEventListener('click',function(){
// Select Felder auslesen
let gruppen_link=document.getElementById('gruppe').value;
let wertung_link=document.getElementById('wertung').value;
//Link und inhalte der Selectfelder zusammen bauen
let link=`${hauptlink}?Gruppe=0${gruppen_link}&wertung=${wertung_link}`;
//Info ausgabe welche Link zusammen gebaut wurde
var inf=document.getElementById('info').innerHTML='Aktuelle Seite ='+link;
//ausgabe in allen Ifranes
let iframes= document.querySelectorAll('iframe');
iframes.forEach(function(i){
i.src=link;
})
// Ende ausgabe iframes
});
});
// ab hier ist für dich uninteresant weil der Code für den Button und das Textfeld ist was unten auf der Seite zu sehen ist.
/* unwichtig, das berauchst du nicht für dein Code*/
document.addEventListener('DOMContentLoaded', async function () {
document.getElementById('openseite').addEventListener('click',function(){
seite=document.getElementById('your_seite').value;
go(seite);
})
function go(seite){
var inf=document.getElementById('info');
inf.innerHTML='Aktuelle Seite ='+seite;
fram=document.querySelectorAll('iframe');
fram.forEach(function(i){
i.src=seite
})
}
go('https://codepen.io/osublake/full/vExQEy');
})
</script>
</main>
</body>
</html>