Wypróbowałem kilka rozwiązań, ale nie udało mi się. Zastanawiam się, czy istnieje rozwiązanie, najlepiej z łatwym do naśladowania samouczkiem.
iframe
cross-domain
J82
źródło
źródło
Odpowiedzi:
Masz trzy możliwości:
1. Użyj zmiany rozmiaru iFrame
Jest to prosta biblioteka do utrzymywania rozmiaru iFrame zgodnie z zawartością. Używa interfejsów API PostMessage i MutationObserver, z rezerwami dla IE8-10. Zawiera również opcje dla strony zawartości, aby zażądać, aby zawierający element iFrame miał określony rozmiar, a także może zamknąć element iFrame, gdy skończysz.
https://github.com/davidjbradshaw/iframe-resizer
2. Użyj Easy XDM (kombinacja PostMessage + Flash)
Easy XDM wykorzystuje zbiór sztuczek umożliwiających komunikację między domenami między różnymi oknami w wielu przeglądarkach, a są przykłady użycia go do zmiany rozmiaru elementu iframe:
http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/
http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/
Easy XDM działa przy użyciu PostMessage w nowoczesnych przeglądarkach i rozwiązania opartego na Flashu jako rezerwy dla starszych przeglądarek.
Zobacz także ten wątek na Stackoverflow (są też inne, to jest często zadawane pytanie). Wydaje się również, że Facebook stosuje podobne podejście .
3. Komunikuj się za pośrednictwem serwera
Inną opcją byłoby wysłanie wysokości iframe na twój serwer, a następnie sondowanie z tego serwera z nadrzędnej strony internetowej za pomocą JSONP (lub użyj długiej ankiety, jeśli to możliwe).
źródło
Mam rozwiązanie umożliwiające dynamiczne ustawianie wysokości elementu iframe na podstawie jego zawartości. Działa to w przypadku treści między domenami. Aby to osiągnąć, należy wykonać kilka kroków.
Załóżmy, że dodano element iframe na stronie internetowej „abc.com/page”
<div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>
Następnie musisz powiązać zdarzenie "wiadomość" systemu Windows pod stroną "abc.com/page"
Podczas ładowania elementu iframe musisz wysłać wiadomość do zawartości okna iframe z komunikatem „FrameHeight”:
źródło
To, co zrobiłem, to porównanie elementu iframe scrollWidth, aż zmienił rozmiar, podczas gdy przyrostowo ustawiłem wysokość IFrame. I dla mnie zadziałało dobrze. Możesz dostosować przyrost według uznania.
źródło
Mam skrypt, który znajduje się w ramce iframe wraz z zawartością. Sprawdza również, czy istnieje element iFrameResizer (wstawia go jako skrypt), a następnie dokonuje zmiany rozmiaru.
Poniżej przedstawię uproszczony przykład.
Następnie zawartość iframe można wstawić w dowolnym miejscu na innej stronie / witrynie za pomocą następującego skryptu:
Treść iframe zostanie wstawiona poniżej, gdziekolwiek umieścisz tag script.
Mam nadzieję, że to komuś pomoże. 👍
źródło
<script ... data-src="http://google.com">
i wypełniłem nim iframe src.[email protected]
Oto moje proste rozwiązanie na tej stronie. http://lab.ohshiftlabs.com/iframesize/
Oto jak to działa;
Zasadniczo, jeśli możesz edytować stronę w innej domenie, możesz umieścić inną stronę iframe należącą do twojego serwera, która zapisuje wysokość do plików cookie. Z częstotliwością odczytywania plików cookie podczas aktualizacji zaktualizuj wysokość elementu iframe. To wszystko.
Pobieranie; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip
Edycja: grudzień 2019
Powyższe rozwiązanie zasadniczo wykorzystuje inny element iframe wewnątrz elementu iframe. 3. element iframe należy do domeny głównej strony, którą nazywasz ciągiem zapytania, który zapisuje wartość rozmiaru w pliku cookie, zewnętrzna strona sprawdza to zapytanie z pewnymi odstępami czasu. Ale to nie jest dobre rozwiązanie, więc powinieneś postępować zgodnie z tym:
Na górze strony:
Tutaj możesz sprawdzić,
m.origin
skąd pochodzi.Na stronie z ramką:
Chociaż nie zapominaj, że nie jest to tak bezpieczny sposób. Aby była bezpieczna, zaktualizuj * wartość (targetOrigin) z żądaną wartością. Skorzystaj z dokumentacji: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
źródło
Znalazłem inne rozwiązanie po stronie serwera dla twórców stron internetowych, które używa PHP do uzyskania rozmiaru elementu iframe.
Pierwszy to użycie skryptu serwera PHP do wywołania zewnętrznego za pośrednictwem funkcji wewnętrznej: (jak
file_get_contents
with but curl i dom).Musisz wyświetlić pod div (
iframe_reserve
) kod HTML wygenerowany przez wywołanie funkcji za pomocą prostegoecho curl_get_file_contents("location url iframe","activation proxy")
Po wykonaniu tej czynności funkcja zdarzenia body ładowana za pomocą javascript pobiera wysokość elementu iframe strony tylko za pomocą prostej kontroli zawartości div (
iframe_reserve
)Więc użyłem
divHeight = document.getElementById("iframe_reserve").clientHeight;
wysokości zewnętrznej strony, którą wywołamy po zamaskowaniu kontenera div (iframe_reserve
). Po tym ładujemy iframe o dobrej wysokości i to wszystko.źródło
Napotkałem ten problem podczas pracy nad czymś w pracy (używając React). Zasadniczo mamy zewnętrzną zawartość HTML, którą zapisujemy w naszej tabeli dokumentów w bazie danych, a następnie wstawiamy na stronę w określonych okolicznościach, gdy jesteś w zestawie danych Dokumenty.
Tak więc, biorąc pod uwagę elementy
n
śródliniowe, z których maksymalnien
może zawierać zewnętrzny kod HTML, musieliśmy opracować system, który będzie automatycznie zmieniał rozmiar elementu iframe każdego elementu wbudowanego po całkowitym załadowaniu zawartości każdego z nich. Po krótkim zakręceniu kołami skończyło się na tym:message
detektor zdarzeń w indeksie naszej aplikacji React, który sprawdza określony klucz, który ustawimy z elementu iframe nadawcy.<script>
kodu HTML, dołączam tag, który będzie czekał na uruchomienie elementu iframewindow.onload
. PopostMessage
uruchomieniu wysyłamy wiadomość do okna nadrzędnego z informacjami o identyfikatorze iframe, obliczonej wysokości itp.id
elementu iframe, który przekazujemy wMessageEvent
obiekcieiframe
, po prostu ustaw wysokość na podstawie wartości, która jest przekazywana z elementu iframepostMessage
.źródło