部分上了一個新的窗口

如果我有一個頁面上的一些隱藏的元素，包含一些內容的網頁，我怎麼可以創建一個鏈接，當用戶點擊它，瀏覽器將打開一個新的窗口，展示的內容（只內容，例如一些json數據）？部分上了一個新的窗口

ps。我知道在頁面上隱藏一些內容可能是個不好的主意。這是更好地把一個動作鏈接，將獲得來自服務器的內容。但它涉及到很多其他的頭痛，這是不是我是誰創造的頁面，所以請讓我知道，如果有一個相對簡單的解決方案...

來源

2012-07-19 Agzam

「真正的」新的瀏覽器窗口？還是隻有一個模式窗口，像[jQuery的對話框（http://jqueryui.com/docs/dialog/）？ – Zeta 2012-07-19 21:41:42

我不知道。基本上我想在新標籤頁/窗口中顯示json數據。或者...也許有一種方法可以將json數據發送到某個在線json查看器，以便用戶以更易讀的形式查看json數據？ – Agzam 2012-07-19 21:49:54

請使用http://okonet.ru/projects/modalbox/index.html與內嵌的內容設置

來源

2012-07-19 21:43:37 spiralclick

打開第二頁時，你可以通過（URL編碼）隱藏元素的含量作爲參數的URL。然後，這個參數可以（未編碼）插入第二頁的正文中。

以下示例適用於本地OS X.在其他操作系統上，示例可能需要放置一個實際的Web服務器之前，它會工作：

page1.html：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Page 1</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
function openwindow(){ 
    window.open("page2.html?html="+escape($("#myDiv").html())); 
} 
</script> 
<style> 
.hidden { 
    visibility: hidden; 
} 
</style> 
</head> 
<body> 

<a href="javascript:openwindow();">Click Me!</a> 

<div class="hidden" id="myDiv"> 
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png"> 
<p>See the HTML5 <a href="http://www.w3.org/TR/2012/WD-html5-20120329/">specification</a></p> 
</div> 

</body> 
</html>

page2.html

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Page 2</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
jQuery.extend({ 
    // from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/ 

    parseQuerystring: function(){ 
     var nvpair = {}; 
     var qs = window.location.search.replace('?', ''); 
     var pairs = qs.split('&'); 
     $.each(pairs, function(i, v){ 
      var pair = v.split('='); 
      nvpair[pair[0]] = pair[1]; 
     }); 
     return nvpair; 
    } 
}); 
</script> 
<script> 
    $(document).ready(function(){ 
     $(document.body).html(unescape(jQuery.parseQuerystring().html)); 
    }); 
</script> 
<style> 
.hidden { 
    visibility: hidden; 
} 
</style> 
</head> 
<body> 

<!-- this will be replaced --> 

</body> 
</html>

來源

2012-07-19 22:27:58

部分上了一個新的窗口

回答

相關問題