IFrame Fenster ist blank unter IOS(Safari)

Diskutiere IFrame Fenster ist blank unter IOS(Safari) im HTML Forum im Bereich Programmierung; Guten Tag, Ich bin dabei mir eine eigene Website zu erstellen, um meinen 3D Drucker als Dienstleistung anbieten zu können. Dafür greife ich auf...
K

Knallkopf

New member
Beiträge
3
Punkte Reaktionen
0
Guten Tag,

Ich bin dabei mir eine eigene Website zu erstellen, um meinen 3D Drucker als Dienstleistung anbieten zu können. Dafür greife ich auf ein <iframe> Tool von Treatstock zurück.
Jetzt habe ich jedoch bei IOS Geräten wie Iphones und Macs das Problem, dass dieses Fenster nicht angezeigt wird. Es scheint auch kein Problem von Safari zu sein, da auch anderen Browser (z.B. Brave) auf IOS das selbe Problem haben.
Unter Windows funktioniert die Seite jedoch Einwandfrei.

Dies wäre die Seite von mir:
https://www.cjack-3dprint.de/

Der HTML code dieser Seite ist folgender:
HTML:
<!DOCTYPE html>

<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>C-Jack 3D-Print</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Bestellen Sie hier bei uns Ihren 3D-Druck und lassen Sie ihn sich bequem nach Hause liefern. Einfach und unkompliziert das 3D Model hochladen und einen sofortigen Preisvorschlag erhalten.">
        <meta name="keywords" content="3d Druck, 3d print, drucken, druck, bestellen, kaufen, berlin, 3ddruck, 3d-druck, c-jack, anfänger, easy, versand, zuschicken lassen">
        <meta name="author" content="C-Jack">
        <link rel="stylesheet" href="style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-228107513-1">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-228107513-1');
</script>

    </head>
    <body>
     

        <header>
            <div class="logo"><a href="http://www.cjack-3dprint.de"><img src="./logo.png" alt="logo"></a></div>
            <nav>
                <ul class="nav_links">
                    <li><a href="./How_to/index.html">How-to</a></li>
                    <li><a href="./Über_uns/index.html">Über uns</a></li>
                    <li><a href="./Refer_a_Friend/index.html">Refer a Friend</a></li>
                </ul>
             </nav>
             <a class="cta" href="./Kontakt/index.html"><button>Kontakt</button></a>
        </header>

        <div id="top">
            <div id="image">
                <img src="image.jpg" alt="Photo by SIMON LEE on Unsplash">
            </div>
        </div>
        <div id="main">

            <section id="printer"></section></div>
            <!-- Printer: 1466-da Vinci 1.0 PRO -->
            <iframe class="ts-embed-printservice" src="https://www.treatstock.com/my/print-model3d/widget?posUid=fixedPsPrinter&psPrinterId=1466" frameborder="1"></iframe>              
   

        <div id="footer">
            Copyright 2022 - Jeremy Chuck Jacob <br> <br>
            <a href="./Kontakt/index.html">Impressum</a>
        </div>


        <script src="" async defer></script>
    </body>
 
</html>

Der Css Code ist folgender:

CSS:
body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0px;
    background-color: rgb(1, 0, 48);
    color: white;
}

/* Dieser css Abschnitt ist für die Navbar */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li, a, button {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
}

.logo {
    cursor: pointer;
}

.logo img {
    width: 230px;
    max-width: 100%;
}

.nav_links {
    list-style: none;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
   transition: all 0.3s ease 0s;


}

.nav_links li a:hover {
    color: #0088a9;

 }

 button {
     padding: 9px 25px;
     background-color: rgba(0,123,169,1);
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease 0s;
 }

 button:hover {
    background-color: rgba(0,123,169,0.8);
 }


/* ab hier endet der Abschnitt für die Navbar */


#top {
    text-align: center;
}


#logo-name {
    font-size: 32px;
    font-weight: bold;
    margin: 8px;
}

#navigation a {
    color: rgb(219, 219, 219);
    padding: 8px;
}

#navigation a:hover {
    color: hsl(197, 100%, 22%);
}

#image img {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 16px;
}

#main {
    max-width: 1000px;
    margin: auto;
    padding: 16px;
}

#main a {
    color: gray;
}

#main a:hover {
    color: hsl(197, 100%, 22%);
}

#footer {
    text-align: center;
    color: gray;
    padding: 16px;
}

#footer a {
    color: gray;
    text-decoration: none;
}

section {
    margin-bottom: 64px;
}

#header {
    position: absolute;
    margin-top: 16px;
    background-color: rgb(1, 0, 48);
}

.ts-embed-printservice {
    width: 100%;
    height: 1530px;
}
@media (min-width:480px) {
    .ts-embed-printservice {
    width: 100%;
        height: 1000px;
    }
}
@media (min-width:550px) {
    .ts-embed-printservice {
    width: 100%;
        height: 670px;
    }
}


Irgendwelche Ideen? :)
 
K

Knallkopf

New member
Beiträge
3
Punkte Reaktionen
0
Das dachte ich mir schon beinahe :)
Gibt es denn eine Möglichkeit ein solches Fenster einzubinden ohne die Coockies von Drittanbietern zu benötigen?
 
T

tk1234

Member
Beiträge
6
Punkte Reaktionen
0
Gibt es denn eine Möglichkeit ein solches Fenster einzubinden ohne die Coockies von Drittanbietern zu benötigen?
Da wohl alle solchen Anbieter Cookies setzen, wird das Einbinden fremder Seiten nicht gehen - die einzige Möglichkeit wäre selbst so ein Tool auf dem eigenen Server zu installieren.
 
K

Knallkopf

New member
Beiträge
3
Punkte Reaktionen
0
verdammt ^^ dazu fehlen mir leider die Kenntnisse xD
Ganz zu schweigen davon, dass das mein Raspbarry wahrscheinlich nicht packen würde.
trotzdem danke für die Antwort :)
 
basti1012

basti1012

Well-known member
Beiträge
194
Punkte Reaktionen
15
Probier doch mal aus Spaß aus den iFrame
HTML:
<iframe class="ts-embed-printservice" src="https://www.treatstock.com/my/print-model3d/widget?posUid=fixedPsPrinter&psPrinterId=1466" style="height:425px;width:350px;border: 1px solid black"></iframe>
zu ersetzen mit
HTML:
<embed src="https://www.treatstock.com/my/print-model3d/widget?posUid=fixedPsPrinter&psPrinterId=1466" style="height:425px;width:350px;border: 1px solid black"></embed>
oder
HTML:
<object data="https://www.treatstock.com/my/print-model3d/widget?posUid=fixedPsPrinter&psPrinterId=1466" style="height:425px;width:350px;border: 1px solid black">

Ich erwarte da jetzt keine großen Änderungen, aber ab und zu hat das schon mal bei bestimmten Sachen geholfen
 
Thema:

IFrame Fenster ist blank unter IOS(Safari)

Oben Unten