1

ページにコンテンツを含む非表示の要素がある場合、リンクを作成するにはどうすればよいですか?ユーザーがリンクをクリックすると、ブラウザーは新しいウィンドウを開いてコンテンツを表示します (コンテンツのみ、たとえば json データ)?

ps。ページに隠しコンテンツを配置するのはおそらく悪い考えだと思います。サーバーからコンテンツを取得するアクションリンクを配置する方が良い..しかし、それは他の多くの頭痛の種を含み、ページを作成したのは私ではないので、比較的簡単な解決策があれば教えてください...

4

2 に答える 2

0

インラインコンテンツ設定でhttp://okonet.ru/projects/modalbox/index.htmlを使用してください

于 2012-07-19T21:43:37.190 に答える
0

2 番目のページを開くときに、隠し要素の (URL エンコードされた) コンテンツを URL の引数として渡すことができます。その引数は、ロード時に 2 番目のページの本文に (エンコードされずに) 挿入される可能性があります。

次の例は、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 に答える