Блог

Главная - Вопросы по программированию - Веб-страница внутри веб-страницы: какой HTML-элемент может это сделать?

Веб-страница внутри веб-страницы: какой HTML-элемент может это сделать?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я разрабатываю программу обновления веб-сайта. Моя идея состоит в том, чтобы определенные HTML-элементы были частью класса, обновляемого. Затем я изменю каждый элемент с этим классом на элемент textarea. Таким образом, он может быть обновлен.

Что я хочу сделать, так это разделить мой updater.html разделенный на 2 области, в левой части будет элемент select (со списком названий страниц), в правой части будет отображаться / загружаться определенная веб-страница внутри updater.html веб-страница.

Возможно ли это сделать и какой HTML-элемент мне понадобится для этого? Это фрейм или iframe (как насчет object или это только для HTML5)? Является ли iframe кроссбраузерным? Моя цель — заставить это работать в IE, FireFox, Chrome и Safari.

Как вы думаете, какой HTML-элемент был бы лучшим для этого? Также повлияет ли недавно загруженная HTML-страница (С ее таблицей стилей css) на updater.html макет (потому что у него другая таблица стилей css)?

 <html>
<head>

</head>
<body>
   <table>
      <tr>
        <td class="updaterSection">
          <select>
            <option> home </option>
             ...
          </select>
        </td>

        <td class="updatableWebpage">
          <!-- What would you put here? -->
        </td>
       </tr>
     </table>
</body>
</html>

Ответ №1:

Вы хотели бы использовать iframe для выполнения этой задачи.

 <html>
    <head>
    </head>
    <body>
        <table>
            <tr>
                <td class="updaterSection">
                    <select>
                        <option> home </option>
                        ...
                        </select>
                </td>
                <td class="updatableWebpage">
                    <iframe src="yourwebpage.html" id="webpage">
                    </iframe>
                </td>
            </tr>
        </table>
    </body>
</html>

Комментарии:

1. Я уже пробовал версию getElementById раньше и у меня возникли проблемы с ней, потому что src не является свойством каждого объекта или по какой-то подобной причине. С тех пор я всегда использую window.frames[‘веб-страница’].src.

2. Проблема, с которой вы сталкиваетесь с getElementById, заключается в том, что веб-страница не меняется при выборе одного из параметров, или есть какая-то другая проблема?

Ответ №2:

Используйте для этого iframe. Как показано ниже

 <iframe src="webpage2.html"></iframe>

Надеюсь, это поможет.

Ответ №3:

iframes являются кроссбраузерными и будут работать в этом случае. они также будут содержать свои собственные стили, которые не повлияют на страницу за пределами iframe.