Dokumentacija za vgradnjo iframe

Vgradite našo vsebino brezhibno na svojo spletno stran s samodejnim prilagajanjem višine, različnimi načini prikaza in brez drsnih vrstic. Popolno za partnerstva, white-label rešitve in integracijo vsebine.

Pregled načinov vgradnje

Povzetek, kaj posamezen način prikaže ali skrije.

Način	URL	Prikaže	Skrije
Samo navigacija	https://rrweb.si/?embed=navbar	Glava (navbar)	Zgornji pas, noga
Samo zgornji pas	https://rrweb.si/?embed=topbar	Zgornji pas (.it-topbar)	Navigacija, noga
Zgornji pas + noga	https://rrweb.si/?embed=topbar-footer	Zgornji pas, noga	Navigacija
Minimalno	https://rrweb.si/?embed=minimal	Samo vsebina	Zgornji pas, navigacija, noga
Celotna postavitev	https://rrweb.si/?embed=full	Vse	Nič

Demonstracija v živo

Oglejte si delovanje iframe integracije spodaj. Iframe samodejno prilagodi svojo višino glede na vsebino.

Predogled v živo

Prikaže samo vsebino. Skrije vse navigacijske elemente.

Prikaže celotno postavitev brez skritih elementov.

Korak 1: Vključite JavaScript knjižnico

Dodajte to skripto na svojo HTML stran (najbolje pred zapiralno oznako ):

Primer kode

<script type="module">
  import { autoInitialize } from 'https://rrweb.si/public/modules/iframe-embed/parent-manager.js';
  autoInitialize();
</script>

Korak 2: Izberite način vgradnje

Izberite, katere elemente želite prikazati v vgrajeni vsebini z dodajanjem parametra URL-ju:

Samo navigacija

Prikaže samo navigacijski meni. Skrije zgornji pas in nogo.

?embed=navbar

Minimalno

Prikaže samo vsebino. Skrije vse navigacijske elemente.

?embed=minimal

Samo zgornji pas

Prikaže samo zgornji informacijski pas. Skrije navigacijo in nogo.

?embed=topbar

Zgornji pas + noga

Prikaže zgornji pas in nogo, skrije navigacijo.

?embed=topbar-footer

Celotna postavitev

Prikaže celotno postavitev brez skritih elementov.

?embed=full

Korak 3: Popolni primeri integracije

Kopirajte in prilepite te pripravljene primere na svojo spletno stran:

Osnovni primer

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Primer vgrajene vsebine</title>
</head>
<body>
  <h1>Moja spletna stran z vgrajeno vsebino</h1>

  <!-- Iframe with auto-height -->
  <iframe
    src="https://rrweb.si/?embed=navbar"
    data-auto-height
    data-allowed-origins="https://rrweb.si"
    data-height-padding="20"
    width="100%"
    style="border: 1px solid #ddd; border-radius: 4px;"
    scrolling="no">
  </iframe>

  <!-- Include parent-manager.js -->
  <script type="module">
    import { autoInitialize } from 'https://rrweb.si/public/modules/iframe-embed/parent-manager.js';
    autoInitialize();
  </script>
</body>
</html>

Napredni primer (JavaScript kontrola)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Napredna iframe integracija</title>
</head>
<body>
  <div id="iframe-container"></div>

  <script type="module">
    import { initializeIframe } from 'https://rrweb.si/public/modules/iframe-embed/parent-manager.js';

    // Create iframe programmatically
    const iframe = document.createElement('iframe');
    iframe.src = 'https://rrweb.si/?embed=navbar';
    iframe.style.width = '100%';
    iframe.style.border = '1px solid #ddd';
    iframe.setAttribute('scrolling', 'no');

    document.getElementById('iframe-container').appendChild(iframe);

    // Initialize with options
    const cleanup = initializeIframe(iframe, {
      allowedOrigins: ['https://rrweb.si'],
      heightPadding: 20,
      smoothTransition: true
    });

    // Listen to height changes
    iframe.addEventListener('heightchange', (event) => {
      console.log('New height:', event.detail.height);
    });
  </script>
</body>
</html>

Možnosti konfiguracije

Prilagodite obnašanje iframe z uporabo teh HTML data atributov:

Atribut	Tip	Privzeto	Opis
`data-auto-height`	boolean	-	Omogoča samodejno prilagajanje višine
`data-allowed-origins`	string	""	Z vejico ločen seznam dovoljenih izvorne za varnost
`data-height-padding`	number	0	Dodatni razmak za dodajanje k izračunani višini (v pikslih)
`data-smooth-transition`	boolean	true	Omogoči gladke prehode višine (true/false)

Technical Details

How It Works

Session-Based Persistence

The embed mode is stored in the user's session, ensuring consistent display across navigation within the iframe. This eliminates the need to add the ?embed= parameter to every link.

Automatic Cleanup

When users exit the iframe context and visit pages normally, the system automatically detects this and clears the embed mode from their session, restoring the full page layout.

Demo Mode

The demo parameter (&demo=1) prevents session persistence, allowing documentation pages to show live previews without affecting the user's normal browsing experience.

Dynamic Height Adjustment

The parent-manager.js script listens for PostMessage events from the iframe and automatically adjusts the iframe height to match the content, eliminating scrollbars and providing a seamless experience.

Important: The embed mode session has a configured timeout. After extended inactivity, the session will expire and the system will return to normal display mode.

Ključne funkcije

Samodejno zaznavanje iframe - ni potrebna ročna nastavitev
Dinamično prilagajanje višine - brez drsnih vrstic
Več načinov prikaza (navigacija, zgornji pas, minimalno)
Obstojnost seje - preživi navigacijo

Varen PostMessage API z validacijo izvora
Popolnoma odziven in prijazen do mobilnih naprav
Brez drsnih vrstic - popolna uporabniška izkušnja
Enostavna integracija - samo 2 vrstici kode

Potrebujete pomoč?

Če imate vprašanja ali potrebujete pomoč pri iframe integraciji, je naša tehnična ekipa tukaj, da vam pomaga.

Kontaktirajte nas: podpora@racunalniske-resitve.si