я могу показать определенную часть страницы, используя document.getElementById (href)? - PullRequest
Новая
       33

я могу показать определенную часть страницы, используя document.getElementById (href)?

1 голос
/ 02 июня 2011

, если у меня есть страница с названием "страница содержимого": 

<body > 

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

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

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

</body>

и другая страница с этим Java-скриптом (код в значок закрытия не отображается ). 

<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 страницы, чтобы получить его? как: 

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

Есть идеи?

Ответы [ 3 ]

0 голосов
/ 02 июня 2011

Нет человека.Это невозможно.

Я проверил ваш код и нашел исходный сайт, на котором он был размещен.
URL: http://example.nemikor.com/creating-dialogs-on-demand/

Если вы проверите три ссылки на этом сайтеВы можете видеть, что каждая из трех ссылок ссылается на три разных Uris.

0 голосов
/ 05 июня 2011

То, что вы просите, напоминает мне о том, как работает 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>

Обычно считается, что лучше подписывать прослушиватели событий в сценарии, чем inline в HTML. Кроме того, не используйте « нажмите здесь » для текста ссылки.

0 голосов
/ 02 июня 2011

То, что вы в основном хотите, как я понял, - это показ содержимого данного URL в поле / контейнере / представлении на вашем сайте.

Есть несколько способов добиться этого.Вот два из них:

  • Рекомендуется загружать контент через ajax .(Ссылка идет на документацию jQuery Ajax - jQuery сделает вашу жизнь проще ;-))
  • Другой способ - использовать iFrames .
...