Osadza sobie stronę internetową Bootstrap w iframe

Pracuję nad aplikacją SaaS, Który w rzeczywistości zapewnia klientowi pełną stronę internetową. Klient może uzyskać dostęp do swojej strony pod adresem:
http://client.myapp.com
. Chcę jednak klientów łatwo osadzić tę stronę na swojej stronie. W tej chwili po prostu daję kod osadzający iframe Z arkusza stylów, aby zresetować pola tagów body.


<head>

<style type="text/css">

html { overflow: auto; }

html, body, div, iframe { margin: 0px; padding: 0px; height: 100%; border: none; }

iframe { display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden; }

</style>

</head>

<body>

<iframe frameborder="0" height="100%" id="myapp" marginheight="0" marginwidth="0" name="myapp" scrolling="auto" src="[url=https://client.myapp.com"]https://client.myapp.com"[/url] width="100%"></iframe>

</body>


Jednak gdy obejmują iframe, Strona nie reaguje już. Jak mogę odgrywać reakcję na stronie internetowej źródłowej iframe /lub inny sposób, który możesz zaoferować/ ?
2022-12-16 Dodaj komentarz
Udostępnij to

Nie znaleziono powiązanych wyników

    Zaproszony:

    Bronisław

    Potwierdzenie od:

    Więc znalazłem dwa rozwiązania tego problemu:

    Decyzja 1:


    <head>
    
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    
<style>body { margin: 0px; } .embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; min-height: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
    
</head>
    
<body>
    
<div class="embed-container"><iframe src="[url=https://client.myapp.com"]https://client.myapp.com"[/url] style="border:0;"></iframe></div>
    
</body>


    Decyzja 2:


    <head>
    
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    
<script src="[url=https://code.jquery.com/jquery-2.1.1.min.js"></script>]https://code.jquery.com/jquery ... gt%3B[/url]
    
/* Using [url=http://npr.github.io/responsiveiframe/]http://npr.github.io/responsiveiframe/[/url] */
    
<script src="jquery.responsiveiframe.js"></script>
    
<script type="text/javascript">
    
$/function// {
    
 $/'iframe'/.responsiveIframe/{xdomain: '*'}/;
    
}/;
    
</script>
    
<style>
    
body {
    
 margin: 0;
    
}
    
</style>
    
</head>
    
<body>
    
<iframe src="[url=https://client.myapp.com"]https://client.myapp.com"[/url] style="border:0; width: 100%; height: 100%;"></iframe>
    
</body>


    Nadal wydaje się, że oboje działają idealnie jak przeglądarka pulpitu /Chrome, Firefox/, I na moim telefonie komórkowym /Android 4/
    2022-12-16 0 0
    Udostępnij to

    Kazimierz

    Potwierdzenie od:

    Dodaj coś takiego


    @media screen and /min-width: 768px/ {
    
 iframe{ 
    
 min-width:768px;
    
 }
    
}
    

    
@media screen and /min-width: 992px/ {
    
 iframe{ 
    
 min-width:992px;
    
 }
    
}
    

    
@media screen and /min-width: 1200px/ {
    
 iframe{ 
    
 min-width:1200px;
    
 }
    
}


    W twoim pliku. css.

    Te prośby media prowadzić do tego, że szerokość iframe Zbiega się z szerokością ekranu zawierającego.
    2022-12-16 0 0
    Udostępnij to

    Ryszard

    Potwierdzenie od:

    Upewnij się, że używasz:
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>

    W tytule iframes.
    2022-12-16 0 0
    Udostępnij to
    Dlaczego jest złożony? 0 odpowiedzi zostało zwiniętych

    Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

    Polityka prywatności: https://zweryfikowac.pl/Polityka-prywatnosci.pdf
    Copyright © 2023, All Rights Reserved