Blog im dynamischen Iframe

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:image:src" content="https://www.mobirise-tutorials.com/images/social-sharing/Blog.png"> <meta property="og:image" content="https://www.mobirise-tutorials.com/images/social-sharing/Blog.png"> <meta name="twitter:title" content="Blog im dynamischen Iframe"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <link rel="shortcut icon" href="assets/images/logo-mobirise-250x250.png" type="image/x-icon"> <meta name="description" content="PHP Blog von PHPJabbers. Skript zum Erstellen von Blogging 眉ber ein Content Management System zum Thema Kochen mit dem Thermomix."> <title>Blog im dynamischen Iframe</title> <link rel="stylesheet" href="assets/web/assets/mobirise-icons2/mobirise2.css"> <link rel="stylesheet" href="assets/web/assets/mobirise-icons-bold/mobirise-icons-bold.css"> <link rel="stylesheet" href="assets/icon54/style.css"> <link rel="stylesheet" href="assets/simple-line-icons/simple-line-icons.css"> <link rel="stylesheet" href="assets/Material-Design-Icons/css/material.css"> <link rel="stylesheet" href="assets/FontAwesome/css/font-awesome.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css"> <link rel="stylesheet" href="assets/popup-overlay-plugin/style.css"> <link rel="stylesheet" href="assets/dropdown/css/style.css"> <link rel="stylesheet" href="assets/socicon/css/styles.css"> <link rel="preload" href="https://www.mobirise-tutorials.com/News-PHPJabbers/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="https://www.mobirise-tutorials.com/News-PHPJabbers/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap"></noscript> <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css?v=rw27m6"><link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css?v=rw27m6" type="text/css"> <script src="https://consent.cookiefirst.com/sites/mobirise-tutorials.com-f6a24dff-9a33-4bc8-bd8d-af58db844677/consent.js"></script>  <style> /* Image */ .goog-te-gadget img { display: none !important; } /* Powered */ .goog-te-gadget { color: #e2e2e2 !important; } /* Link */ .VIpgJd-ZVi9od-l4eHX-hSRGPd { color: #6592e6 !important; } /* Link Hover */ .VIpgJd-ZVi9od-l4eHX-hSRGPd:hover { color: #326ede !important; } </style>  <link rel="stylesheet" href="./lightbox/dist/css/lightbox.min.css">  <style> .lb-outerContainer { background-color: #000; } </style>  <script src="./lightbox/dist/js/lightbox-plus-jquery.min.js"></script>  <script> lightbox.option({ 'fadeDuration': 50, 'imageFadeDuration': 100, 'resizeDuration': 200, 'alwaysShowNavOnTouchDevices': true, 'wrapAround': true, 'albumLabel': "Bild %1 von %2" }) </script> </head> <body>  <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'de' }, 'google_translate_element'); } </script>  <script type="text/plain" data-cookiefirst-category="functional" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <section data-bs-version="5.1" class="menu menu1 cid-uahxQDcCMt" once="menu" id="menu1-2j"> <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg"> <div class="container"> <div class="navbar-brand"> <span class="navbar-logo"> <a href="https://www.mobirise-tutorials.com/"> <img src="assets/images/logo-mobirise-250x250.png" alt="" style="height: 4.1rem;"> </a> </span> <span class="navbar-caption-wrap"><a class="navbar-caption text-white text-primary display-4" href="https://www.mobirise-tutorials.com/">Mobirise-Tutorials</a></span> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <div class="hamburger"> <span></span> <span></span> <span></span> <span></span> </div> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true"><li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/">News Blog</a></li><li class="nav-item dropdown"><a class="nav-link link text-white text-primary dropdown-toggle display-4" href="javascript: void();" data-toggle="dropdown-submenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Anwendungen</a><div class="dropdown-menu" aria-labelledby="dropdown-552"><a class="text-white show text-primary dropdown-item display-4" href="https://mobirise-tutorials.com/News-PHPJabbers/blog-anker.php">Blog PHP Einbau mit Anker ID</a><a class="text-white show text-primary dropdown-item display-4" href="https://mobirise-tutorials.com/News-PHPJabbers/blog-direkt.php">Blog PHP Einbau ohne Anker</a><a class="text-white show text-primary dropdown-item display-4" href="https://mobirise-tutorials.com/News-PHPJabbers/blog.html">Blog Einbau dynamischer Iframe</a><a class="text-white show text-primary dropdown-item display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/gallery.html">Gallery Script</a><a class="text-white show text-primary dropdown-item display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/contact.html">Kontakt Formular</a><a class="text-white show text-primary dropdown-item display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/">News Blog</a><a class="text-white show text-primary dropdown-item display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/simpleCMS.html">Simple CMS</a><a class="text-white show text-primary dropdown-item display-4" href="booking.html">Verf眉gbarkeitskalender</a></div></li><li class="nav-item"><a class="nav-link link text-white show text-primary display-4" href="https://www.phpjabbers.com/" target="_blank"><span class="icon54-v1-puzzle-piece mbr-iconfont mbr-iconfont-btn"></span>PHP Jabbers</a></li><li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="https://www.mobirise-tutorials.com/Formular/" target="_blank"><span class="mobi-mbri mobi-mbri-contact-form mbr-iconfont mbr-iconfont-btn"></span>Kontakt</a></li> <li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="https://www.mobirise-tutorials.com/Forum/" target="_blank"><span class="sli-bubbles mbr-iconfont mbr-iconfont-btn"></span>Forum</a></li> <li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="https://www.mobirise-tutorials.com/Suchen.php" target="_blank"><span class="mbrib-search mbr-iconfont mbr-iconfont-btn"></span>Suchen</a> </li></ul> </div> </div> </nav> </section> <section data-bs-version="5.1" class="header6 cid-uahxQDwhcd mbr-fullscreen" id="header6-2k"> <div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(0, 0, 0);"></div> <div class="align-center container"> <div class="row justify-content-center"> <div class="col-12 col-lg-10"> <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-3 display-2"><strong>Mobirise Tutorials</strong></h1> <h2 class="mbr-section-subtitle mbr-fonts-style mbr-white mb-3 display-5">Blog im Iframe</h2> <p class="mbr-text mbr-white mbr-fonts-style display-7"> Content Management Blogging von <a href="https://www.phpjabbers.com/" class="text-warning" target="_blank">PHP Jabbers</a><br>Kochen mit dem Thermomix</p> <div class="mbr-section-btn mt-3"><a class="btn btn-white-outline display-4" href="blog.php#Blog"><span class="mobi-mbri mobi-mbri-contact-form mbr-iconfont mbr-iconfont-btn"></span>Blog</a> <a class="btn btn-white-outline display-4" href="blog.html#Tutorial1"><span class="mbrib-pages mbr-iconfont mbr-iconfont-btn"></span>Tutorial</a> <a class="btn btn-primary display-4" href="https://mobirise-tutorials.com/News-PHPJabbers/blog-direkt.php"><span class="mdi-content-forward mbr-iconfont mbr-iconfont-btn"></span>Zum PHP Direkteinbau</a> <a class="btn btn-white-outline display-4" href="blog.php#Google" target="_blank"><span class="mdi-action-translate mbr-iconfont mbr-iconfont-btn"></span>Translate </a></div> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-uahxQDLPe5" id="Blog"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-7"> <h3 class="mbr-section-title mbr-fonts-style mb-4 display-5"><strong>Mein Thermomix</strong></h3> <p class="mbr-section-subtitle mbr-fonts-style mb-4 display-7"><a href="https://www.mobirise-tutorials.com/Datenschutz/" class="text-primary" target="_blank">Datenschutzregeln <span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a></p> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-uahxQDWADM" id="blogging"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-9">  <iframe id="myFrame" src="https://mobirise-tutorials.com/News-PHPJabbers/blog-aufruf.php"></iframe>   <p style="color: #232323; font-size: 0.8rem; margin-top: 20px;" class="mbr-text mbr-fonts-style display-7">  <a href="https://mobirise-tutorials.com/News-PHPJabbers/blogging/" target="_blank" class="text-primary">Admin <span class="sli-close mbr-iconfont mbr-iconfont-btn"></span></a>  <a href="blog.html#Blog" class="text-primary mynobreak" style="float: right;">nach oben <span class="sli-arrow-up-circle mbr-iconfont mbr-iconfont-btn"></span></a> </p> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-uahxQEfR3K" id="Tutorial1"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-10"> <h4 class="mbr-section-subtitle mbr-fonts-style mb-4 display-5">Blog Script 5.0 - im Iframe</h4> <p class="mbr-text mbr-fonts-style display-7"><br><a href="booking.html#booking" class="text-primary"></a><a href="simpleCMS.html#SimpleCMS" class="text-primary"></a><a href="simpleCMS.html#SimpleCMS" class="text-primary"></a><a href="gallery.html#Galerie-1" class="text-primary"></a><a href="contact.html#Blog" class="text-primary">Nach oben <span class="sli-arrow-up-circle mbr-iconfont mbr-iconfont-btn"></span></a><br><br>Bitte bedient diese Anwendung auf dieser Seite mit dem dynamischen Iframe nur auf Deutsch und nicht mit einer Google-脺bersetzung, da dies hier nicht funktioniert. Ihr k枚nnt diese Anwendung auf meiner <a href="https://mobirise-tutorials.com/News-PHPJabbers/blog-anker.php" class="text-primary">Seite mit Direkteinbau</a> in allen anderen Sprachen bedienen.<br><br>Hier zeige ich das "Stiva Blog 5.0" Script von <a href="https://www.phpjabbers.com/stiva-blog-script/" class="text-primary" target="_blank">PHP Jabbers</a>, das ich hier nur als dynamisches Iframe eingebaut habe, da diese Anwendung noch die veraltete Bootstrap Version 3 verwendet und es daher zu CSS Problemen beim direkten Einbau in Mobirise kommt. Die Anpassung der CSS ist wahrscheinlich f眉r die meisten aufwendiger als der Einbau mit der Verwendung von einem Inline-Frame.<br><br>Dieses Skript verwendet auch Verweise, die kein www in der URL tragen d眉rfen, denn sonst werden die CSS-Dateien nicht gefunden. Jeder Aufruf muss also ohne das www in der URL stattfinden. Meine Umleitung 眉ber eine .htaccess Datei ist aber so aufgebaut, dass ich ein www in der URL habe und das will ich nun auch nicht, nur wegen dieser Anwendung, 盲ndern.<br><br>Weiterhin lassen sich die vorgegebenen Platzhalter in der Form mit den {geschweiften Klammern} nur bedingt in Mobirise einbinden, wenn man diese als "Text" direkt schreibt. <br><br>Die Sprung-Anker der Anwendung weisen alle zum oberen Rand der Seite, was bei einem Direkteinbau erfordert, dass die Anwendung im obersten Header-Block eingebaut wird. Bei einem Iframe wird der obere Rand vom Iframe angesteuert. Auf der anderen Seite werden die Seiten im Iframe manchmal nicht ganz korrekt dargestellt und die vorhandenen Anker k枚nnen nicht immer direkt angew盲hlt werden, besonders auf Smartphones.<br><br>Mit einem Javascript ist es aber auch m枚glich beim Direkteinbau auf einen solchen Sprung-Anker zu verweisen, wie ich es auf dieser <a href="https://mobirise-tutorials.com/News-PHPJabbers/blog-anker.php" class="text-primary">Beispielseite <span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a> zeige, die ich pers枚nlich so bevorzuge. </p> <p class="mbr-text mbr-fonts-style display-7"><br>Hier ist meine Mobirise-Seite, bei der ich diese Anwendung direkt in diese <a href="https://mobirise-tutorials.com/News-PHPJabbers/blog-direkt.php" class="text-primary">Mobirise PHP-Seite <span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a> eingebettet habe. Bitte beachtet die diversen CSS-脛nderungen bei der Variante vom Direkteinbau.<br><br>Diese Anwendung verwendet immer noch eine veraltete Bootstrap Version 3. Durch die Darstellung als geframte Seite bleiben die Bootstrap-Versionen getrennt und k枚nnen sich nicht gegenseitig beeinflussen.</p> <p class="mbr-text mbr-fonts-style display-7"><br>Bitte stellt eventuelle Fragen zu dieser Anwendung in meinem <a href="https://www.mobirise-tutorials.com/Forum/" class="text-primary" target="_blank">Forum <span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a><br><br>Erstellt euch bei eurem Provider 眉ber das Kundenmen眉 zun盲chst eine MySQL- oder MariaDB Datenbank und schreibt euch die Zugangsdaten zu dieser Datenbank auf, die ihr w盲hrend der Installation von dieser Anwendung eintragen m眉sst.<br><br> Das sieht bei meinem Provider "1&1 IONOS" dann ungef盲hr so aus: <br> <br>Hostname: <br>db1234567890.hosting-data.io <br> <br>Username: <br>dbu1234567 <br> <br>Passwort: <br>mein!unlesbares-Passwort <br> <br>Database / Datenbank: <br>dbs12345678<br><br>Den Eintrag "Table prefix" k枚nnt ihr leer lassen. Ein Tabellenpr盲fix ist ein Pr盲fix (Vorsilbe), das jedem Tabellennamen vorangestellt  wird.<br><br>Die Tabellen der Datenbank werden dann automatisch w盲hrend der Installation angelegt.<br><br>Ich habe dieses Script im April 2024 installiert und zu diesem Zeitpunkt nichts f眉r die "Developer License" (Entwickler Lizenz) bezahlt. Es scheint, dass sich die Preispolitik im April 2024 ge盲ndert hat. Nun besteht die M枚glichkeit, t盲glich ein Skript kostenlos herunterzuladen oder das gesamte Paket aller Skripte f眉r EUR 279,00 zu erwerben. Der Support wurde aber leider komplett eingestellt.<br><br>PHPJabbers wurde bereits im April 2021 von <a href="https://onlineonly.com/" class="text-primary" target="_blank">Online Only</a> 眉bernommen.<br><br>Im Kunden-Bereich, auf der Webseite von PHP Jabbers, muss man sich zun盲chst mit neuen Zugangsdaten registrieren und einloggen. Dort findet man den Download der Skripte sowie den Lizenz-Schl眉ssel, falls notwendig.<br><br>Hier geht es zum Download dieser Anwendung von <a href="https://www.phpjabbers.com/stiva-blog-script/" class="text-primary" target="_blank">phpjabbers.com <span class="mbrib-download mbr-iconfont mbr-iconfont-btn"></span></a>.<br><br>Ihr entpackt also die ZIP Datei vom Download und kopiert s盲mtliche Dateien und Ordner auf den Server, am besten in ein Verzeichnis, das ihr beliebig benennen k枚nnt, wie z.B. "scripts". Ich habe dieses Verzeichnis bei mir "blogging" genannt.<br><br>Nun ruft ihr im Browser das Verzeichnis mit den hochgeladenen Skripten von PHP Jabbers auf, indem sich auch eine Startseite "index.php" dieser Anwendung befindet, also ungef盲hr so:<br><br>www.DeineDomain.de/blogging/<br><br>Die Installation ist sehr einfach und jeder Schritt wird sorgf盲ltig erkl盲rt. Unten zeige ich, von den wichtigen Schritten der Installation, einige <a href="blog.php#Installation" class="text-primary">Screenshots</a>. Nach der erfolgreichen Installation, ruft man mit dieser URL dann den Administratorbereich auf.<br><br>Man kann im Benutzerbereich beliebig viele Benutzer als Blogger hinzuf眉gen. Beim Anlegen von Benutzern kann zwischen Administrator und Autor unterschieden werden. Der Autor hat dann nur Zugriff auf die eigenen Beitr盲ge, w盲hrend der Administrator s盲mtliche Inhalte bearbeiten kann. <br><br>Der Verfasser eines Blogs erh盲lt optional eine E-Mail, wenn ein Kommentar erstellt wurde. Man kann diese Kommentare entweder sofort anzeigen lassen oder, wie ich es hier eingestellt habe, zuerst freischalten, um Spam zu vermeiden. <br><br>Unter "Optionen" kann man komfortabel ein Backup von der Datenbank und auch von den Einstellungen der Anwendung erstellen. Dort kann man auch unter "Languages" alle Bereiche der Oberfl盲che in seine Sprache 眉bersetzen, was allerdings recht aufwendig ist. Ich habe hier nur einige 脛nderungen vorgenommen, damit Hinweise auf der Seite in deutscher Sprache erscheinen.<br><br>Man kann die Bewertungen begrenzen, was ich hier nicht getan habe, um besser testen zu k枚nnen. Mehrfache Bewertungen k枚nnen durch die IP-Adresse oder auch durch Cookies verhindert werden.<br><br>Alle Eintr盲ge werden in der Datenbank gespeichert und man kann die Datenbank und Einstellungen auch sehr komfortabel in der Anwendung sichern, bzw. bearbeiten.<br><br>Auch bei dieser Anwendung wird der Einbettungscode, hier nur f眉r PHP, unter dem Tab "Install" generiert. Hier habe ich diesen Code aus den oben genannten Gr眉nden der Inkompatibilit盲t der Bootstrap Versionen nicht in Mobirise eingebaut, sondern mir eine kleine HTML-Seite h盲ndisch erstellt, die ihr euch hier downloaden k枚nnt:<br><br><a href="https://mobirise-tutorials.com/News-PHPJabbers/Download/blog-aufruf.txt" class="text-primary" target="_blank">Download/blog-aufruf.txt <span class="mbrib-download mbr-iconfont mbr-iconfont-btn"></span></a><br><br>脛ndert den Dateinamen dann auf die Dateierweiterung <strong>.php</strong>, also z.B.:<br><br><strong>blog-aufruf.php</strong><br><br>damit die Seite vom Browser als PHP-Skript interpretiert werden kann. 脛ndert auch, entsprechend der Anweisungen am Tab "Install", die URLs. Nat眉rlich m眉ssen meine URLs durch eure ersetzt werden.</p> <p class="mbr-text mbr-fonts-style display-7"><br>Bitte lest zum Einbau vom <a href="blog.html#Iframe" class="text-primary">dynamischen Iframe</a> in Mobirise unten weiter.</p> </div> </div> </div> </section> <section data-bs-version="5.1" class="gallery3 cid-uahxQEvQqt" id="Installation"> <div class="container-fluid"> <div class="mbr-section-head"> <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-5">Einige Bilder zur Installation dieser Anwendung</h4> <h5 class="mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-2 display-7">Klicke auf ein Bild zur Anzeige der Installationsschritte</h5> </div> <div class="row mt-4"> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/blog/1-blog.jpg" data-lightbox="image-block" data-title="Anforderungen" onclick="clicksound.playclip()"><img src="assets/images/001-check.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"> <strong>Anforderungen</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/blog/2-blog.jpg" data-lightbox="image-block" data-title="Lizenzschl眉ssel entf盲llt, da kostenlos" onclick="clicksound.playclip()"><img src="assets/images/002-license-key.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Lizenzschl眉ssel entf盲llt</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/blog/3-blog.jpg" data-lightbox="image-block" data-title="MySQL Datenbank Zugang" onclick="clicksound.playclip()"><img src="assets/images/003-mysql.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>MySQL Datenbank Zugang</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/blog/4-blog.jpg" data-lightbox="image-block" data-title="Installations Pfade" onclick="clicksound.playclip()"><img src="assets/images/4-blog.jpg" alt="Installation" title=""></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Installations Pfade</strong></h5> </div> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="gallery3 cid-uahxQEVEfi" id="gallery3-2p"> <div class="container-fluid"> <div class="row mt-4"> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/blog/5-blog.jpg" data-lightbox="image-block" data-title="Admin Zugangsdaten" onclick="clicksound.playclip()"><img src="assets/images/005-administraor-login.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Admin Zugangsdaten</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/blog/6-blog.jpg" data-lightbox="image-block" data-title="Fortschritt der Installation" onclick="clicksound.playclip()"><img src="assets/images/006-installation-progress.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Fortschritt der Installation</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/blog/7-blog.jpg" data-lightbox="image-block" data-title="Alles erledigt" onclick="clicksound.playclip()"><img src="assets/images/007-installation-ok.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Alles erledigt</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/blog/8-blog.jpg" data-lightbox="image-block" data-title="Erstes Login" onclick="clicksound.playclip()"><img src="assets/images/8-blog.jpg" alt="Installation" title=""></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Erstes Login</strong></h5> </div> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-uamCcYeaUj" id="Iframe"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-10"> <h4 class="mbr-section-subtitle mbr-fonts-style mb-4 display-5">Dynamischer Iframe</h4> <p class="mbr-text mbr-fonts-style display-7"> Hier habe ich ein Skript von <a href="https://werner-zenk.de/javascript/die_hoehe_eines_iframes_responsiv_dem_inhalt_anpassen.php" class="text-primary" target="_blank">Werner-Zenk.de</a> zum Einbau des dynamischen Iframe verwendet, das ihr euch bitte auf der Seite vom Werner kopiert, bzw. welches ich bereits in der h盲ndisch erstellten Datei "blog-aufruf.php" eingebaut habe.<br><br>Ich habe hier dem Selektor <strong>iframe</strong> ein wenig CSS gegeben (optional), damit die H枚he bereits auf der Arbeitsseite von Mobirise korrekt dargestellt wird. Dazu habe ich diese Anweisung in den Bereich "CSS Editor" vom "Code Editor" geschrieben:<br> <code> iframe {<br>   height: 334px;<br> }<br> </code> </p> <p class="mbr-text mbr-fonts-style display-7">Das Iframe selbst habe ich in dem Bereich "HTML Editor" vom "Code Editor" eingetragen. Der Verweis f眉hrt auf meine h盲ndisch erstellet Seite "blog-aufruf.php", die ich oben zum Download bereit gestellt habe.<br> </p> <p class="mbr-text mbr-fonts-style display-7"> <code> <br> <iframe id="myFrame" src="https://mobirise-tutorials.com/News-PHPJabbers/blog-aufruf.php"></iframe><br> <br> </code> </p> <p class="mbr-text mbr-fonts-style display-7">Ich habe hier, aus zwei Gr眉nden, eine absolute URL gew盲hlt. Zun盲chst wird dadurch die Anwendung bereits auch dynamisch auf meiner Arbeitsseite von Mobirise dargestellt und zum anderen h盲tte ein relativer Link wieder das www in der URL, was ich hier unterbinden muss, damit die CSS der Anwendung funktioniert.</p> <p class="mbr-text mbr-fonts-style display-7"><br>Nat眉rlich m眉sst ihr diese URL entsprechend eurer Domain anpassen. </p> </div> </div> </div> </section> <section data-bs-version="5.1" class="image3 cid-uahxQFGTMR" id="Code-Editor"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper"> <img src="assets/images/code-editor-1.jpg" alt="Einbettungscode" title="Einbettungscode im Code-Editor"> <p class="mbr-description mbr-fonts-style mt-2 align-center display-4"> Einbettungscode im Mobirise Block</p> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="image3 cid-uahxQGiUfn" id="image3-2t"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper"> <img src="assets/images/einbettungscodes.jpg" alt="Install Code" title="Ansicht vom Einbettungs Code"> <p class="mbr-description mbr-fonts-style mt-2 align-center display-4"> Ansicht von den Codes und Platzhalter zum Einbau in die geframte Seite "blog-aufruf.php"</p> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="image3 cid-uarTTcXGu2" id="Dashboard"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper"> <img src="assets/images/dashboard.jpg" alt="Dashboard Blog" title="Ansicht vom Dashboard"> <p class="mbr-description mbr-fonts-style mt-2 align-center display-4"> Ansicht vom Dashboard mit einer 脺bersicht der Beitr盲ge</p> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="footer7 cid-uahxQGY64V" once="footers" id="Google"> <div class="container"> <div class="media-container-row align-center mbr-white"> <div class="col-12"> <p class="mbr-text mb-0 mbr-fonts-style display-7"> 漏 Copyright Mobirise-Tutorials.com<br><br><a href="https://www.mobirise-tutorials.com/Datenschutz/" class="text-primary" target="_blank">Datenschutz und Impressum</a><br><br><span style="color: #ffe161;">Google Translator</span><br><span style="font-size: 0.8rem;"><a href="javascript: void();" onclick="cookiefirst_show_settings();" class="text-white">Funktionale Cookies akzeptieren</a></span></p> <div class="d-flex justify-content-center"> <div style="text-align: center;" id="google_translate_element"></div> </div> </div> </div> </div> </section> <script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/smoothscroll/smooth-scroll.js"></script> <script src="assets/ytplayer/index.js"></script> <script src="assets/dropdown/js/navbar-dropdown.js"></script> <script src="assets/theme/js/script.js"></script>  <script> // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com) // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc) //** Call: uniquevar.playclip() to play sound var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list: "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } // Initialize sound clips: var watersplash=createsoundbite("./sound/water-splash.mp3") var dropsound=createsoundbite("./sound/bubbles.mp3") var clicksound=createsoundbite("./sound/click.mp3") </script> <div id="scrollToTop" class="scrollToTop mbr-arrow-up"><a style="text-align: center;"><i class="mbr-arrow-up-icon mbr-arrow-up-icon-cm cm-icon cm-icon-smallarrow-up"></i></a></div> </body> </html>

CINXE.COM

Blog im dynamischen Iframe