Как именно я могу заменить iframe на div и Javascript?

У меня есть страница, которая загружает внешнюю HTML-страницу в iFrame. Есть две проблемы, с которыми я сталкиваюсь с этим:

  1. iFrame всегда фиксированная высота, но я хочу, чтобы она расширялась вертикально в зависимости от высоты содержимого.
  2. содержимое внутри iFrame не может наследовать стили CSS прикреплено к HTML-странице, которая его содержит. HTML внутри iFrame должен иметь собственную ссылку или отдельную таблицу стилей.

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

иначе есть простой в JavaScript вызов, который может загрузить внешний HTML-файл в DIV?

просто для ясности, так как кажется, что некоторые люди неправильно поняли меня:

прошу как заменить iframe на DIV и Javascript для того, чтобы получить функциональность я упоминалось выше. Я не поиск способов заставить iFrames вести себя по-другому.

(Я думал, что это будет довольно распространено, но большинство вопросов и информации, которые я нашел на этом сайте и в Интернете, похоже, специфичны для конкретной ситуации и запрашивают дополнительную функциональность, которая мне не нужна, и усложняет проблему. Однако, если я что-то пропустил, и это дубликат, я бы не обиделся, если бы это было закрыто.)

10
html iframe javascript

5 ответов

вы можете сделать вызов ajax, чтобы получить html-страницу и добавить ее в div. Например, используя JQuery:

$.get('yourPage.html', function(data) { $('#yourDiv').html(data); });

подробнее на: http://api.jquery.com/jQuery.get/

11

Я на самом деле написал ответ на другой вопрос, который, кажется, применяется здесь:https://stackoverflow.com/a/10012302/166661

у вас есть сервер, который вернет вам информацию - вы можете поместить эту информацию в IFRAME... или вы можете вызвать функцию JavaScript, чтобы получить эту информацию и отобразить его в месте (DIV) вы отложите на вашу страницу.

вот пример HTML-страницы, которая будет извлекать информацию из сервер с использованием AJAX

<html>
<head>
<script type="text/javascript">
function getAreaInfo(id)
{
  var infoBox = document.getElementById("infoBox");
  if (infoBox == null) return true;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) return;
    if (xhr.status != 200) alert(xhr.status);
    infoBox.innerHTML = xhr.responseText;
  };
  xhr.open("GET", "info.php?id=" + id, true);
  xhr.send(null);
  return false;
}
</script>
<style type="text/css">
#infoBox {
  border:1px solid #777;
  height: 400px;
  width: 400px;
}
</style>
</head>
<body onload="">
<p>AJAX Test</p>
<p>Click a link...
<a href="info.php?id=1" onclick="return getAreaInfo(1);">Area One</a>
<a href="info.php?id=2" onclick="return getAreaInfo(2);">Area Two</a>
<a href="info.php?id=3" onclick="return getAreaInfo(3);">Area Three</a>
</p>
<p>Here is where the information will go.</p>
<div id="infoBox">&nbsp;</div>
</body>
</html>

и вот информация.php, который возвращает информацию обратно на HTML-страницу:

<?php
$id = $_GET["id"];
echo "You asked for information about area #{$id}. A real application would look something up in a database and format that information using XML or JSON.";
?>

надеюсь, что это помогает!

3

прошу Как заменить iframe на DIV и Javascript чтобы получить функциональность, о которой я упоминал выше. Я не поиск способов заставить iFrames вести себя по-другому.

Если вы хотите упомянутую функциональность, вам не нужно заменять iframe. Функциональность 2 проще с iframe. Что касается функциональности 1, у вас есть два варианта:

  1. поместите свой iframe в DIV и играйте с правилами css, такими как абсолютная и относительная высота позиции плюс на 100%

  2. добавьте функцию javascript для обработки события resize объекта window для изменения размера iframe

0
#mydiv {
      all: initial; /* blocking inheritance for all properties */
}

С как изолировать div от общедоступных стилей CSS?

Это решение спасло мой день.

0

  1. использовать плагин jQuery для динамического изменения размера iframe.

  2. вы не можете изменить стиль содержимого внутри iframe. Для чего вы планируете использовать iframe? Часто есть лучшие способы решения проблем.

-1