Как возможно, чтобы источник страницы не отображал то, что находится на странице?

Это моя веб-страница:

введите здесь описание изображения

Я пытаюсь выяснить, почему мой список отображается неправильно, но это другой пост. Чтобы устранить неполадки, я щелкнул правой кнопкой мыши страницу и выбрал «Просмотреть исходный код страницы». Как вы можете видеть ниже, этот список людей (Адам Кинкейд и т. д.) даже не отображается. Как это возможно?

Исходный текст страницы:

<!DOCTYPE html>
<html>
<head>
    <title>Presto</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="/Content/ie10mobile.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile-1.3.2.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.3.2.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.3.2.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/durandal.css" rel="stylesheet"/>
<link href="/Content/toastr.css" rel="stylesheet"/>
<link href="/Content/app.css" rel="stylesheet"/>

    <script type="text/javascript">
        if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
            var msViewportStyle = document.createElement("style");
            var mq = "@-ms-viewport{width:auto!important}";
            msViewportStyle.appendChild(document.createTextNode(mq));
            document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
        }
    </script>
</head>
<body>
    <div id="applicationHost">
        <div class="page-splash"></div>
<div class="page-splash-message">
    Presto
</div>
<div class="progress progress-striped active page-progress-bar">
    <div class="bar" style="width: 100%;"></div>
</div>

    </div>

    <script src="/scripts/jquery-1.9.1.js"></script>
<script src="/scripts/jquery.mobile-1.3.2.js"></script>
<script src="/scripts/knockout-2.2.1.debug.js"></script>
<script src="/scripts/sammy-0.7.4.js"></script>
<script src="/scripts/toastr.js"></script>
<script src="/scripts/Q.js"></script>
<script src="/scripts/breeze.debug.js"></script>
<script src="/scripts/bootstrap.js"></script>
<script src="/scripts/moment.js"></script>

            <script type="text/javascript" src="/App/durandal/amd/require.js" data-main="/App/main"></script>
</body>
</html>

web html asp.net hottowel
person Bob Horn    schedule 08.09.2013    source источник

Ответы (4)


arrow_upward
6
arrow_downward

«Просмотр исходного кода» предоставит вам только исходный источник страницы при загрузке страницы. Контент, вероятно, был добавлен на страницу с помощью JavaScript после этого.

Похоже, что страница динамически загружает модули с помощью require.js:

<script type="text/javascript" src="/App/durandal/amd/require.js" data-main="/App/main></script>

Вы можете посмотреть на скрипт main.js, который загружается, чтобы увидеть, добавляет ли он элементы.

Используйте инструменты разработчика вашего браузера, чтобы изучить DOM, чтобы получить текущий «источник».

В Chrome просто нажмите Ctrl+Shift+i, чтобы открыть Инструменты разработчика, или щелкните элемент правой кнопкой мыши и выберите "Проверить" его. .

person Rob Hruska    schedule 08.09.2013
comment
Я использую Хром. Я использую F12 для просмотра информации о странице, но я не знаю, как исследовать DOM, чтобы получить текущий источник. Как бы я это сделал? - person Bob Horn; 09.09.2013

arrow_upward
11
arrow_downward

Вы используете Chrome, чтобы увидеть текущий активный источник документа (содержащий динамически сгенерированный контент):

  1. Откройте инструменты разработчика (используя F12)
  2. Выберите представление «Элементы» (крайний левый параметр в заголовке инструментов разработчика).
  3. Щелкните правой кнопкой мыши элемент <html> и выберите «Копировать как HTML».
  4. Вставьте в свой любимый текстовый/HTML-редактор
person Plymouth223    schedule 08.09.2013
comment
это externalHTML или innerHTML? - person Fight Fire With Fire; 10.04.2020

arrow_upward
1
arrow_downward

Просмотр исходного кода дает вам только то содержимое, которое отображается в коде позади. если вы хотите увидеть весь контент и элементы, это возможно с помощью просмотра просмотра (F12) раздела элементов.

person javidasd    schedule 04.04.2020

arrow_upward
0
arrow_downward

Как указывалось в большинстве ответов, можно использовать Инструменты разработчика Chrome, я хочу добавить только то, что хорошо работает для меня;

right click элемент страницы <HTML>, затем перейдите к Expand recursively .. Похоже, главная страница обновляется после выполнения скриптов.

затем я вижу полный источник html, включая Xpath, также их можно легко отслеживать на странице.. при наведении курсора на подэлементы источник html также выделяет его на странице с дополнительной информацией.

person Mohammad Kanan    schedule 03.04.2020