如何啓用並修復鏈接懸停的預覽頁面？

如何在我的網頁上的所有鏈接上禁用網站預覽功能？這是當用戶將鼠標移動到頁面中的任何鏈接上時，我想顯示一個簡單的彈出窗口，它將鏈接加載到頁面中。我嘗試在Google和stackoverflow的幫助下自己做。但是，結果得到了這樣的事情 -如何啓用並修復鏈接懸停的預覽頁面？

（實際的頁面LINK渲染）

我應該如何解決這個問題？我想讓它與Google即時預覽類似。

這裏是我的代碼 - （網站鏈接是從Web服務獲取）

HTML文件

<div class="text-result" *ngIf="Display('all')"> 
       <div *ngFor="let item of items$|async" class="result"> 
        <div class="frame"> 
         <script> 
          $(".head-link").mouseover(function() { 
           $(this).children(".tooltip").show(); 
          }).mouseout(function() { 
           $(this).children(".tooltip").hide(); 
          }); 
         </script> 
         <div class="title"> 
          <a href="{{item.link}}" class="head-link">{{item.title}} 
          <iframe id="tooltip" src="{{item.link}}"></iframe> 
          </a> 
         </div> 
        </div> 
        <div class="link"> 
         <p>{{item.link}}</p> 
        </div> 
        <div> 
         {{item.pubDate|date:'fullDate'}} 
        </div> 
       </div> 
      </div>

css文件

.head-link { 
    color: #069; 
    cursor: pointer; 
} 

.tooltip { 
    display: none; 
    position: absolute; 
    border: 1px solid #000; 
    width: 400px; 
    height: 400px; 
}

來源

2017-03-23 Harshit Prasad

很難說沒有看到代碼正常工作。你能爲我們設置一個jsfiddle嗎？此外，出於安全原因，許多站點不允許在iframe中查看，所以也許這是您的麻煩。你的Chrome控制檯有任何錯誤？ – Adam

Chrome控制檯沒有錯誤。有很多代碼。所以，我不能把jsfiddle。這些鏈接是從Web服務中獲取的。 –

JS小提琴應該只包含你需要的複製問題，你不需要把所有的代碼放在那裏，只需要複製問題。 – Adam

I setup a minimal JS fiddle for you, and I believe I resolve the issue.

我更改的摘要是：

您的iframe有id=tooltip，當您將其引用爲.tooltip時，所以我將其更改爲class=tooltip。
您的jQuery腳本必須出現在頁面上由它使用的元素之後，因此我將腳本標記移動到了class=text-results div的底部。

有兩點需要注意：

首先，這不是一個角2的問題，你在你的項目中使用角2，但問題是你的jQuery代碼。
其次，你真的應該避免使用jQuery來解決Angular 2項目中的問題。 Angular 2有能力解決這個問題，而無需包含jQuery。混合使用jQuery和Angular 2會導致代碼混亂且難以理解，您只需使用Angular 2來解決此問題會好得多。

來源

2017-03-24 15:32:24 Adam

感謝亞當，給我的問題時間：）我也會，嘗試與Angular 2做它。 –

很高興我能幫上忙。祝你好運！ – Adam

嘿亞當！試着用Angular 2來解決它。如果你能檢查我的代碼，它對我非常有幫助。在這裏，我的jsfiddle - https://jsfiddle.net/harshit98/nusL4cbL/ .Angular不允許動態綁定到iframe的src。我需要注入'DomSanitizer'並使用'bypassSecurityTrustResourceUrl'方法。我應該怎麼做？ –

如何啓用並修復鏈接懸停的預覽頁面？

回答

相關問題