diedVIPs

html knowhow

Iframe mit Vorschau










Iframe mit Vorschau

Mit diesem kleinen Modul können Sie eine Vorschau eines Iframes anzeigen

So sieht´s aus
Quellcode
<html>
<head>
<style type="text/css">
.preview_frame iframe {width:100%; height: 350px; border: none; margin-top: 10px;}
.preview_frame .close-btn {height:40px; color:cyan; font-size:1.3em; background:red; text-align:center; align-items:center; justify-content:center; display:flex; }
button {width:200px; color:green; font-weight:normal}
.box #result {position: relative;}
</style>
</head>

<body >
<table name="table" align="center" style="width: 40%">
<tr><td>
<div id="content">
<button ><a style="color:green" href="../Kontakt.html">Zeige Vorschau</a></button></div></td>
<td><button onclick="window.location.href = 'http://www.htmlknowhow.de/kontakt.html'">Öffne Iframe</button></td></tr>
<tr><td colspan="2"><div id="result"></div></td></tr>
</table>
<script type="text/javascript">
(()=>{
let content = document.getElementById('content');
let links = content.getElementsByTagName('a');
for (let index = 0; index < links.length; index++) {
const element = links[index];
element.addEventListener('click',(e)=>{
e.preventDefault();
openDemoLink(e.target.href); }) }
function openDemoLink(link){
let div = document.createElement('div');
div.classList.add('preview_frame');
let frame = document.createElement('iframe');
frame.src = link;
let close = document.createElement('a');
close.classList.add('close-btn');
close.innerHTML = "Klick hier, um die Vorschau zu schließen";
close.addEventListener('click', function(e){
div.remove(); })
div.appendChild(frame);
div.appendChild(close);
document.getElementById('result').appendChild(div); } })()
</script>
</body>

</html>







Kontakt    Datenschutz   Impressum