Как создать «MasterPage» в HTML

Question

Как создать «MasterPage» в HTML

0

Есть ли способ создать страницу, которую другие страницы на веб-сайте могут использовать в HTML? Что-то вроде того, что делает masterpage в ASP.NET.

Любая полезная помощь будет оценена.

seun 20 март 2014, в 13:09

Источник

Теги:

html

asp.net

master-pages

4 ответа

Ещё вопросы

David East · Answer 1 · 2014-03-20T09-33-00.000Z

Сам HTML является статическим языком. Другие структуры создают динамический HTML (DHTML), такой как ASP.NET.

Таким образом, чистая реализация "мастер-страницы" в HTML невозможна.

Вы можете использовать инфраструктуру JavaScript, такую как AngularJS, чтобы помочь вам достичь "главной страницы" в HTML.

Если вас интересует.NET, вы все равно можете создать свою мастер-страницу в HTML с несколькими перехватами в.NET, чтобы он знал, как отображать основной контейнер.

В ASP.NET MVC ваша главная страница (называемая компоновкой в ASP.NET MVC) может иметь очень мало перехватов в инфраструктуру и сервер. Большая часть из них может быть HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>My Movie Site</title>
    <link href="~/Styles/Movies.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container">
        <div id="header">
          <h1>My Movie Site</h1>
        </div>
        <div id="main">
          @RenderBody()
        </div>
        <div id="footer">
          &copy; @DateTime.Now.Year My Movie Site
        </div>
    </div>
  </body>
</html>

Другой вариант (как упоминается Ondrej) - это серверная сторона (SSI). Большинство серверов должны иметь этот параметр. Это позволит вам вводить другие HTML файлы в страницу, что позволяет создавать мастер-страницу без определенной структуры.

<html>
<title>My Website</title>

<!--#include virtual="/rootPage.html" -->

</html>

В конце концов, я бы порекомендовал использовать фреймворк вместо того, чтобы пытаться объединить кучу SSI.

Что касается iframes, я бы настоятельно рекомендовал использовать отдельные iframes для сборки веб-сайта. Это станет невозможно контролировать и поддерживать. Поскольку вы не можете контролировать содержимое iframe. Кроме того, если весь HTML необходим на странице, он должен быть заново создан для страницы, а не заполнен с использованием iframes.

Итак, используйте фреймворк. Не записывайте сумасшедший способ заменить контент на своей странице. Рамка будет легко поддерживать и иметь смысл, когда вы вернетесь к ней по дороге.

+1, также серверные включения (которые есть у любого приличного веб-сервера) могут выполнять аналогичную работу
Ах! Хороший звонок @ ОндрейСвейдар. Я обновлю свой ответ для этого также.

sidprasher · Answer 2 · 2014-03-20T11-10-00.000Z

Вы можете управлять внешним видом и расположением приложения через CSS. Если вы хотите иметь возможность повторного использования кода, вы можете попробовать использовать iframes для достижения чего-то подобного.

IFrames помогают объединить ссылочную веб-страницу с текущей страницей, что позволяет повторно использовать код. Например, вы можете создать файл menu.html, который вы вставляете на другие страницы -

<iframe src="menu.html" seamless></iframe>

Вот сбалансированное обсуждение того, является ли использование iframe хорошей практикой. Являются ли iframe считающимися "плохой практикой"?

iframes могут быть чрезвычайно полезной частью приложения. Такие сайты, как codepen и cssdeck, должны использовать iframes для демонстрации своего контента. Однако использовать их для эмуляции главной страницы, вероятно, не очень хорошая идея.
@ Дэвид: полностью согласен. Тем не менее, мне кажется, что OP хорошо осведомлен о веб-страницах asp.net и все еще пытается эмулировать функциональность мастер-страниц за рамками. Отсюда и предложение. Если ОП уточняет, то я буду рад снять этот ответ

Tschallacka · Answer 3 · 2014-03-20T10-29-00.000Z

На самом деле, нет. чистый HTML без SSI трудно, но достижимо. Это может не работать локально, хотя из-за настроек безопасности браузера, но если вы загрузите его в Google Документы или бесплатный веб-хостинг или ваш собственный сервер, он должен работать.

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

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

master.js

function add_script(file)
    {
    var js = document.createElement("script");
    js.type = "text/javascript";
    js.src = file;
    document.body.appendChild(js);
    }
function add_stylesheet(file)
    {
    var css = document.createElement("style");
    css.type = "text/css";
    css.src = file;
    document.body.appendChild(css);
    }
add_script('jquery.js');
add_script('jquerui.js');
add_script('whatever.js');

add_style('masterstyle.css');
add_style('jqueryui.css');
window.realcontent = null;// content per page
window.head = null// content to be added above the dynamic content
window.leftcolumn = null//content for left column
window.rightcolumn = null // content for right column
window.bottom = null //footer stuffs

jQuery(document).ready(function()
    {
    window.realcontent = jQuery('body').html();
    jQuery.ajax('masterhead.html').done(function(data)
        {
        window.header = data;
        jQuery.ajax('masterleftcolumn.html').done(function(data)
            {
            window.leftcolumn = data;
            jQuery.ajax('masterrightcolumn.html').done(function(data)
                {
                window.rightcolumn = data;
                jQuery.ajax('masterfooter.html').done(function(data)
                    {
                    window.bottom = data;
                    //finally we can load up everything
                    jQuery('body').html(window.header + window.leftcolumn + window.realcontent + window.rightcolumn + window.bottom);
                    // sanitise memory
                    window.header = null;
                    window.leftcolumn = null;
                    window.realcontent = null;
                    window.rightcolumn = null;
                    window.bottom = null;
                    });
                });
            });
        });
    });

user2277362 · Answer 4 · 2014-03-20T09-41-00.000Z

Используйте фреймы или iframes. Вы также можете использовать javascript для загрузки html. Если это не то, что вы имели в виду, используйте серверные файлы serveride.