Могу ли я навести ссылку на ссылку и показать всплывающее окно сайта, на которое ссылается href?

-1

Итак, если у меня есть href для сайта, могу ли я использовать javascript для отображения всплывающего окна URL-адреса в мини-окне?Могу ли я навести ссылку на ссылку и показать всплывающее окно сайта, на которое ссылается href?

Что-то вроде:

<a href="http://example.com/uri" script="loadpageinwin(this.href)">site</a> 
<script>function loadpageinwin(url) { 
    // show a window about 1/2 the size of the screen 
    // load URL into window 
} 
</script>

Пожалуйста, простите мой JS код, все еще учусь и не знаю, где искать правильные методы и объекты для вызова.

источник

2016-09-27 Ronaldo Nascimento

Свое время я начал изучать JS –

ИМО, это поведение браузера, а не веб-сайт один (сделать Greasemonkey скрипт вместо). Тем не менее, добавьте 'iframe' в свою веб-страницу, настройте ее по своему усмотрению и в своей JS-функции установите для атрибута' src' значение 'url'. Вы также можете разместить это 'iframe' рядом с зависающей ссылкой. – Xenos

Вы пытаетесь открыть новое «окно» или использовать элемент в существующем «окне»? – guest271314

Ниже приведен пример работы с кодом.

Codepen

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
    /* The Modal (background) */ 

    .modal { 
     display: none; 
     /* Hidden by default */ 
     position: fixed; 
     /* Stay in place */ 
     z-index: 1; 
     /* Sit on top */ 
     left: 0; 
     top: 0; 
     width: 100%; 
     /* Full width */ 
     height: 100%; 
     /* Full height */ 
     overflow: auto; 
     /* Enable scroll if needed */ 
     background-color: rgb(0, 0, 0); 
     /* Fallback color */ 
     background-color: rgba(0, 0, 0, 0.4); 
     /* Black w/ opacity */ 
    } 
    /* Modal Content/Box */ 

    .modal-content { 
     background-color: #fefefe; 
     margin: 15% auto; 
     /* 15% from the top and centered */ 
     padding: 20px; 
     border: 1px solid #888; 
     width: 80%; 
     /* Could be more or less, depending on screen size */ 
    } 
    /* The Close Button */ 

    .close { 
     color: #aaa; 
     float: right; 
     font-size: 28px; 
     font-weight: bold; 
    } 

    .close:hover, 
    .close:focus { 
     color: black; 
     text-decoration: none; 
     cursor: pointer; 
    } 
    </style> 
</head> 

<body> 
    <!-- Trigger/Open The Modal --> 
    <a id="link" href="http://www.w3schools.com/html/html_iframe.asp">W3Schools iFrame</a> 

    <!-- The Modal --> 
    <div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
     <span class="close">x</span> 
     <iframe id="content" height="100%" width="100%"></iframe> 
    </div> 

    </div> 
</body> 
<script> 
    // Get the modal 
    var modal = document.getElementById('myModal'); 

    // Get the link that opens the modal 
    var link = document.getElementById("link"); 

    // Get the <span> element that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 

    // When the user hovers over the link open the modal 
    link.addEventListener('mouseover', function(e) { 
    modal.style.display = "block"; 
    console.log(e); 
    document.getElementById("content").src = e.target.href; 
    }); 

    // When the user clicks on <span> (x), close the modal 
    span.onclick = function() { 
    modal.style.display = "none"; 
    } 

    // When the user clicks anywhere outside of the modal, close it 
    window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
    } 
</script> 

</html>

источник

2016-09-27 16:25:00 rushi

Могу ли я навести ссылку на ссылку и показать всплывающее окно сайта, на которое ссылается href?

ответ

Смежные вопросы