Question

我正在尝试转换当前正在使用框架的布局，该框架完美地具有固定标头（此部分需要命名为Banner），并且底部的框架在用户在聊天室中发布内容时滚动（名为Body ）。这适用于帧。我正在堆栈上查看另一个转换帖子并尝试使用它。

帧编码是：

<html>
  <head><title>$main:roomname$</title></head>

  <frameset cols="100%"><frameset rows="120,*">

  <frame name="BANNER" src="$BASE$/BANNER?$CONFIG$" scrolling="AUTO" marginheight="1">
  <frameset cols="*,140" FRAMEBORDER=YES FRAMESPACING=2 BORDER=2>
  <frame name="BODY" src="$BASE$/BODY?$CONFIG$" scrolling="YES">
  <noframes>
    <body>
      Frames are required, sorry folks.
    </body>
  </noframes>
  </frameset></frameset>
</html>

我试图做的是下面的内容。房间名称拉出并显示浏览器应该显示的内容，但它不会提取任何其他信息。它只显示一个白色的屏幕。

编辑尝试加载后查看页面源时尝试更多编码，它会显示从$ BASE $ / BODY拉出的完整网址？$ CONFIG $，它只是没有＆＃39; t像我想要的那样在Div内显示它。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="script.js"></script>
<title>$main:roomname$</title>
<script>
$(document).ready(function(){
$("#BANNER").load("$BASE$/BANNER?$CONFIG$");
});
</script>
<script>
$(document).ready(function(){
$("#BODY").load("$BASE$/BODY?$CONFIG$");
});
</script>
<style>
.BANNER {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 140px;
overflow: hidden;
}

.BODY {
position: absolute;
top: 150px; /* 140px (header) + 10px top padding */
left: 10px; /* 10px padding */
right: 10px; /* 10px padding */
bottom: 10px; /* 10px padding */
overflow: auto;

}
</style>
</head>

<body>
<div id="BANNER"></div>
<div id="BODY"></div>    
</body>    
</html>

根据以下建议编辑2 **。

Answer 1

预览：http://embed.plnkr.co/f7LatqNW5hxY2K781edV/preview

HTML main：

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
<div id="BANNER"></div>
<div id="BODY"></div>    
  </body>    
</html>

HTML：1.html（您尝试嵌入的文件）：

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

JS：

$(document).ready(function(){
    $("#BANNER").load("1.html");
});

如果文件不在您的本地服务器中，那么您可能需要按照here所述的方法进行一些解决方法

转换帧布局

1 个答案: