13

外部HTMLページをiFrameにロードするページがあります。私がこれに直面している2つの問題があります：

  1. iFrameは常に固定の高さですが、コンテンツの高さに応じて垂直方向に拡張したいと思います。
  2. iFrame内のコンテンツは、それを含むHTMLページに添付されたCSSスタイルを継承できません。iFrame内のHTMLには、独自のリンクまたは個別のスタイルシートが必要です。

これらの点のいずれかについて間違っている可能性があるので、もしそうなら、私に知らせてください。そうすれば、私はiFrameを使い続けます。

それ以外の場合、外部HTMLファイルをDIVにロードできる単純なJavascript呼び出しはありますか？

明確にするために、一部の人々が私を誤解しているように見えるので：

上記の機能を利用するために、iframeをDIVとJavascriptに置き換える方法を尋ねています。iFrameの動作を変える方法を探していません。

（これはかなり一般的だと思いましたが、このサイトやWebで見つけた質問や情報のほとんどは状況に固有のようで、必要のない追加機能を要求し、問題を複雑にします。ただし、私が何かを見逃していて、これが重複している場合、これが閉じられても気分を害することはありません。）

4

5 に答える 5

12

ajax呼び出しを行って、htmlページをフェッチし、それをdivに追加できます。たとえば、JQueryを使用します。

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

詳細については、http：//api.jquery.com/jQuery.get/をご覧ください。

于 2012-04-06T17:50:09.003 に答える
4

私は実際に別の質問への答えを書きました、それはここに当てはまるようです：https ://stackoverflow.com/a/10012302/166661

情報を返すサーバーがあります。この情報をIFRAME...に配置するか、JavaScript関数を呼び出してその情報を取得しDIV、ページ上に取っておいた場所（）に表示することができます。

これは、AJAXを使用してサーバーから情報を取得するサンプルHTMLページです。

<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>

そして、これが情報をHTMLページに戻すinfo.phpです。

<?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.";
?>

お役に立てれば！

于 2012-04-06T18:17:08.167 に答える
2 
#mydiv {
      all: initial; /* blocking inheritance for all properties */
}

パブリックCSSスタイルからdivを分離する方法から？

このソリューションは私の一日を救いました。

于 2016-08-10T02:42:34.143 に答える
0

上記の機能を利用するために、iframeをDIVとJavascriptに置き換える方法を尋ねています。iFrameの動作を変える方法を探していません。

上記の機能が必要な場合は、iframeを交換する必要はありません。機能2は、iframeを使用すると簡単になります。機能1に関しては、2つの選択肢があります。

  1. iframeをDIVに入れて、絶対位置と相対プラス高さを100％にするなどのcssルールで遊んでください

  2. ウィンドウオブジェクトのサイズ変更イベントを処理してiframeのサイズを変更するjavascript関数を追加します

于 2012-08-03T14:20:34.257 に答える
0

  1. jQueryプラグインを使用して、iframeのサイズを動的に変更します。

  2. iframe内のコンテンツのスタイルを変更することはできません。iframeを何に使用する予定ですか？多くの場合、物事を解決するためのより良い方法があります。

于 2012-04-06T07:15:43.557 に答える