Question

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

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

Answer 1

请将http://okonet.ru/projects/modalbox/index.html与内联内容设置

一起使用

Answer 2

打开第二页时，您可以将隐藏元素的（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>

新窗口上的部分网页

2 个答案: