在我的彈出式燈箱中添加外部鏈接

Question

在我的網站中，我想在框架中顯示Google網站，但這是我的錯誤：拒絕在框架中顯示，因為它將“ X-Frame-Options”設置為“ SAMEORIGIN”

所以我想在彈出的Lightbox中顯示鏈接，但真的不知道該怎么做！ 這是我彈出的燈箱代碼：

 $(document).ready(function() { var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); //transition effect $('#mask').fadeIn(500); $('#mask').fadeTo("slow", 0.9); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH / 2 - $(id).height() / 2); $(id).css('left', winW / 2 - $(id).width() / 2); //transition effect $(id).fadeIn(2000); //if close button is clicked $('.window .close').click(function(e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function() { $(this).hide(); $('.window').hide(); }); }); 

 #mask { position: absolute; left: 0; top: 0px; width: 100% !important; height: 750px !important; z-index: 9000; background-color: #fff; display: none; } #boxes .window { position: absolute; left: 0!important; top: 0px!important; width: 100%; height: 750px; display: none; z-index: 9999; padding: 20px; text-align: center; } #boxes #dialog { left: 0!important; top: 0px!important; width: 100%; height: 750px; padding: 10px; background-color: #ccc; font-family: 'Segoe UI Light', sans-serif; font-size: 15pt; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="boxes"> <div id="dialog" class="window"> Your Content Goes Here </div> <div id="mask"></div> </div> 

需要添加更多文本以使我的帖子有效，但是一切都說完了！

Answer 1

您可以使用<iframe>來顯示來自外部URL的內容。 這不適用於每個URL，因為某些URL會設置X-Frame-Options來禁止將頁面嵌入<iframe> 。 基本上，您將#dialog的HTML設置為<iframe> ，並將src設置為要顯示的URL，例如：

$(id).html(`<iframe src="https://www.theonion.com/" frameborder="0" width="100%" height="100%" ></iframe>`);

這是一個例子：

 $(document).ready(function() { var id = '#dialog'; $(id).html(`<iframe src="https://www.theonion.com/" frameborder="0" width="100%" height="100%" ></iframe>`); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); //transition effect $('#mask').fadeIn(500); $('#mask').fadeTo("slow", 0.9); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH / 2 - $(id).height() / 2); $(id).css('left', winW / 2 - $(id).width() / 2); //transition effect $(id).fadeIn(2000); //if close button is clicked $('.window .close').click(function(e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function() { $(this).hide(); $('.window').hide(); }); }); 

 #mask { position: absolute; left: 0; top: 0px; width: 100% !important; height: 750px !important; z-index: 9000; background-color: #fff; display: none; } #boxes .window { position: absolute; left: 0!important; top: 0px!important; width: 100%; height: 750px; display: none; z-index: 9999; padding: 20px; text-align: center; } #boxes #dialog { left: 0!important; top: 0px!important; width: 100%; height: 750px; padding: 10px; background-color: #ccc; font-family: 'Segoe UI Light', sans-serif; font-size: 15pt; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="boxes"> <div id="dialog" class="window"> </div> <div id="mask"></div> </div>