Question

如果我有一个名为“内容页面”的页面：

<body > 

<p id="part1">Tread ... inch. </p>

<p id="part2">Tread ... inch. </p>

<p id="part3">Tread ... inch.</p>

</body>

和另一个包含此java脚本的页面（close icon doesn't appear中的代码）。

<head>
<script type="text/javascript" src="popupBox.js"></script>
</head>
<body>

show content of part one : <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>.
show content of part two : <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>.
show content of part three : <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>.

</body>

如果我想要检索要在弹出框中显示的内容页面的特定部分，那可能吗？

我的意思是在popup.js的这一部分：

var boxdiv = document.getElementById(href);

我可以在页面的href中指定标签的ID来进行检索吗？喜欢：

var href = an.href; 
var boxdiv = document.getElementById(href).getElementById("Show The content of this ID tag!");

任何想法？

Answer 1

根据我的理解，您基本上想要的是在您网站的框/容器/视图中显示给定网址的内容。

有一些方法可以实现这一目标。以下是其中两个：

最推荐的是加载内容来自ajax。（链接去了到jQuery Ajax文档 - jQuery会让你的生活更轻松;-) ）
另一种方法是使用iFrames。

Answer 2

没有男人。这是不可能的。

我检查了您的代码并找到了原始网站的发布位置网址：http://example.nemikor.com/creating-dialogs-on-demand/

如果您查看该网站上的三个链接，您可以看到这三个链接中的每三个都引用了三个不同的uris。

Answer 3

你要求的东西让我想起WML如何工作，在一个页面上有多张牌，其中只有一张同时显示。可以将一个页面的内容加载到另一个页面中，但不是您想象的方式。

正如您可能从名称中猜到的那样，getElementById会根据ID属性获取一个元素，而不是其他内容。相反，您必须加载其他页面的内容，此时您可以根据需要显示其中的部分内容。

在popupBox.js中：

var show_hide_box;
# it may not be best to set width, height and border this early,
# but it simplifies the code below
(function(width, height, border) {
    var pages = {};

    function show_hide_box(link) {
        var path = (/^[^#]*/.exec(link.href))[0];
        if (pages[path]) {
            show_content(pages[path], link);
        } else {
            fetch_content(link, path);
        }
        return false;
    }

    function show_content(path, link) {
        var id = (/#(.*)/.exec(link.href))[1];
        if (content[id]) {
            # Show content[id], which is a DOM node
            ...
        } else {
            # the page exists, but not the fragment. Could search 
            # content.elements for the 
            ...
        }
    }

    function fetch_content(link, path) {
        $.ajax({
            url: link.href,
            success: function(data, textStatus, jqXHR) {
              pages[path] = {elements: $(data).filter('p')};
              pages[path].elements.each(function (idx, elt){
                  # TODO: handle elements w/ no id
                  pages[path][elt.id] = elt;
              });
              show_hide_box(link);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                # Can't load the content, so just load the page.
                window.location.href = link.href;
            }
        );
    }

    window.show_hide_box = show_hide_box;
})(400,400,'2px solid');

$(function() {
    $('.external_content').click(function(evt) {
        show_hide_box(this);
        evt.preventDefault();
    });
});

在另一页：

<body>
  show content of <a href="TreadDepth.html#part1" class="external_content">part one</a>.
  show content of <a href="TreadDepth.html#part2" class="external_content">part two</a>.
  show content of <a href="TreadDepth.html#part3" class="external_content">part three</a>.
</body>

在脚本中订阅事件侦听器通常被认为是更好的形式，而不是HTML中的inline。另外，请勿对链接文字使用“click here”。

我可以使用document.getElementById（href）显示页面的特定部分吗？

3 个答案: