Wie kann man eine Live-Vorschau in einem kleinen Popup-Fenster der verlinkten Seite anzeigen, wenn man mit der Maus über einen Link fährt?

Question

Wie kann man eine Live-Vorschau in einem kleinen Popup-Fenster der verlinkten Seite anzeigen, wenn man mit der Maus über einen Link fährt?

wie diese

http://cssglobe.com/lab/tooltip/03/

aber Live-Vorschau

Answer 1

Sie könnten Folgendes tun:

1. Erstellen (oder finden) Sie einen Dienst, der URLs als Vorschaubilder wiedergibt
2. Laden Sie das Bild bei Mouseover und zeigen Sie es an
3. Wenn Sie unbedingt live sein wollen, dann verwenden Sie ein Timer-Plugin für jQuery, um das Bild nach einiger Zeit neu zu laden

Natürlich ist das nicht wirklich live.

Sinnvoller wäre es, für bestimmte URLs z.B. täglich oder wöchentlich Vorschaubilder zu erzeugen und diese zu verwenden. Ich kann mir vorstellen, dass Sie das nicht manuell machen wollen und dass Sie den Nutzern Ihres Dienstes nicht eine Vorschau zeigen wollen, die völlig anders aussieht als die aktuelle Seite.

Answer 2

HTML-Struktur

<div id="app">
<div class="box">
    <div class="title">How to preview link with iframe and javascript?</div>
    <div class="note"><small>Note: Click to every link on content below to preview</small></div>
    <div id="content">
        We'll first attach all the events to all the links for which we want to <a href="https://htmlcssdownload.com/">preview</a> with the addEventListener method. In this method we will create elements including the floating frame containing the preview pane, the preview pane off button, the iframe button to load the preview content.
    </div>
    <h3>Preview the link</h3>
    <div id="result"></div>
</div>

Zunächst fügen wir mit der addEventListener-Methode alle Ereignisse an alle Links an, für die wir eine Vorschau anzeigen möchten. In dieser Methode erstellen wir Elemente wie den schwebenden Rahmen, der das Vorschaufenster enthält, die Schaltfläche zum Ausschalten des Vorschaufensters und die iframe-Schaltfläche zum Laden des Vorschauminhalts.

<script type="text/javascript">
(()=>{
    let content = document.getElementById('content');
    let links = content.getElementsByTagName('a');
    for (let index = 0; index < links.length; index++) {
        const element = links[index];
        element.addEventListener('click',(e)=>{
            e.preventDefault();
            openDemoLink(e.target.href);
        })
    }

    function openDemoLink(link){

        let div = document.createElement('div');
        div.classList.add('preview_frame');

        let frame = document.createElement('iframe');
        frame.src = link;

        let close = document.createElement('a');
        close.classList.add('close-btn');
        close.innerHTML = "Click here to close the example";
        close.addEventListener('click', function(e){
            div.remove();
        })

        div.appendChild(frame);
        div.appendChild(close);

        document.getElementById('result').appendChild(div);
    }
})()

Details zu sehen unter Link zur Live-Vorschau