1

如果我在页面上有一些隐藏元素，其中包含一些内容，我该如何创建一个链接，当用户点击它时，浏览器会打开一个新窗口并显示内容（只有内容，例如一些 json 数据）？

附言。我知道在页面上隐藏一些内容可能是个坏主意。最好放一个可以从服务器获取内容的操作链接。但它涉及许多其他令人头疼的问题，并且不是我创建了页面，所以如果有一个相对简单的解决方案，请告诉我...

4

2 回答 2

0

Please use http://okonet.ru/projects/modalbox/index.html with inline content setting

于 2012-07-19T21:43:37.190 回答
0

打开第二页时，您可以将隐藏元素的（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-19T22:27:58.760 回答