Fatal编程技术网
  • javascript/
  • Javascript 我可以使用document.getElementById（href）显示页面的特定部分吗？

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

javascript iframe

Javascript 我可以使用document.getElementById（href）显示页面的特定部分吗？,javascript,iframe,document,href,getelementbyid,Javascript,Iframe,Document,Href,Getelementbyid,如果我有一个名为“内容页”的页面： 我可以在页面的href中指定标签的ID来检索它吗？比如： var href = an.href; var boxdiv = document.getElementById(href).getElementById("Show The content of this ID tag!"); 有什么想法吗？据我所知，您基本上想要的是在您的站点上的框/容器/视图中显示给定URL的内容 有一些方法可以做到这一点。以下是其中两个： 最推荐的方法是加载 内容通过。（

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

我可以在页面的href中指定标签的ID来检索它吗？比如：

var href = an.href; 
var boxdiv = document.getElementById(href).getElementById("Show The content of this ID tag!");
有什么想法吗？

据我所知，您基本上想要的是在您的站点上的框/容器/视图中显示给定URL的内容

有一些方法可以做到这一点。以下是其中两个：

  • 最推荐的方法是加载 内容通过。（链接开始了 到jqueryajax文档- jQuery将使您的生活更轻松；-） )
  • 另一种方法是使用
      • 没有人。这是不可能的

      我已经检查了您的代码，找到了发布代码的原始站点。
      网址：

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

      您所要求的内容让我想起了如何工作，在一个页面上有多个卡，一次只显示其中一个卡。可以将一个页面的内容加载到另一个页面，但不能按您想象的方式加载

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

      在popubox.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中订阅事件侦听器更好。另外，不要将“”用作链接文本。

      我不清楚您想要什么。ID在整个页面中必须是唯一的，并且“显示此部分！”不是一个有效的ID。我已经编辑了我的问题，希望它现在清楚了：$它不比以前更清楚了。应完整、简洁、正确。你的很短，但差不多就这么多了。有一件事很有帮助，那就是示例HTML。我再次编辑了它，这是我的问题代码文件夹：Thnk在我使用的代码中，他们使用第二种方式，你能给我一个使用第一种方式的示例\demo\sample代码吗？我还在学习jQuery和AJAX，所以我还需要更多的例子来更好地理解它：$非常感谢！这正是我要找的wt！thnx outis^ ^因为我不是那么专业，所以我试图完成代码，当然，理解它。。这就是我提出的wt：我觉得我遗漏了一些东西，比如加载整个页面，然后选择部分ID，对吗$@Evanession：与2shared（需要其他人下载然后打开文件）这样的文件共享网站不同，尝试pastebin.com这样的网站或其他许多让您快速浏览或下载代码的网站，以及大量其他功能。在任何情况下，请确保您发布的是示例代码，而不是完整的生产代码，这将有太多无关的内容需要涉猎。。。。当你提到“加载整个页面然后选择部分ID”时，我不确定你在问什么<上面的code>fetch\u content显示了一种加载页面内容的方法，
      show\u content
      根据ID选择一个特定的元素。没有显示的只是如何显示该元素（因为您似乎对该部分没有问题，在任何情况下，这都是另一个问题的主题）。 
      var href = an.href; 
var boxdiv = document.getElementById(href).getElementById("Show The content of this ID tag!"); 

      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>