使用 iframe 替代 html5 中的框架

【问题标题】：Alternative for frames in html5 using iframes使用 iframe 替代 html5 中的框架
【发布时间】：2013-08-15 18:28:24
【问题描述】：

我是 HTML5 的新手，我做了一些研究，发现<frameset> 的使用已经过时，而我读到的<iframes> 不是。所以有人可以帮助我吗，我想获得与所示示例相同的结果，但同时使用<iframes> 或其他在 HTLM5 中未弃用的<frameset> 替代品？

<frameset cols="20%,*,">
    <frame src="menu.html">
    <frame src="events.html">
</frameset>

【问题讨论】：

  • 没有简单的替代品。
  • 什么，特别是关于你想要复制的帧？你只想要两列吗？
  • 我希望拥有与使用 时相同的功能
  • 您的标记表明您正在尝试在事件列表滚动时在浏览器左侧获取固定菜单。将您的菜单标记放在带有 {position: fixed} 的 div 中会完成同样的事情。
  • 这篇文章有点老了，但是框架已经烂了很久了：nngroup.com/articles/why-frames-suck-most-of-the-time

标签： jquery html iframe frameset


【解决方案1】：

框架已被弃用，因为它们给 url 导航和超链接带来了麻烦，因为 url 只会将索引页面（带有框架集）带到您那里，并且无法指定每个框架窗口中的内容。 如今，网页通常由 PHP、ASP.NET、Ruby 等服务器端技术生成。因此，可以通过将模板与以下内容合并来简单地生成页面，而不是使用框架：

模板文件 

<html>
<head>
<title>{insert script variable for title}</title>
</head>

<body>
  <div class="menu">
   {menu items inserted here by server-side scripting}
  </div>
  <div class="main-content">
   {main content inserted here by server-side scripting}
  </div>
</body>
</html>

如果您不完全支持服务器端脚本语言，您也可以使用服务器端包含 (SSI)。这将允许你做同样的事情——即从多个源文档生成单个网页。

但是，如果您真的只想让网页的一部分成为一个单独的“窗口”，您可以在其中加载不一定位于您自己服务器上的其他网页，您将不得不使用iframe。

你可以像这样模仿你的例子：

框架示例 

<html>
<head>
  <title>Frames Test</title>
  <style>
   .menu {
      float:left;
      width:20%;
      height:80%;
    }
    .mainContent {
      float:left;
      width:75%;
      height:80%;
    }
  </style>
</head>
<body>
  <iframe class="menu" src="menu.html"></iframe>
  <iframe class="mainContent" src="events.html"></iframe>
</body>
</html>

可能有更好的方法来实现布局。我使用了 CSS float 属性，但您也可以使用表格或其他方法。

【讨论】：

    【解决方案2】：

    HTML 5 确实支持 iframe。添加了一些有趣的属性，例如“sandbox”和“srcdoc”。

    http://www.w3schools.com/html5/tag_iframe.asp

    或者你可以使用

    <object data="framed.html" type="text/html"><p>This is the fallback code!</p></object>

    【讨论】：

    【解决方案3】：

    虽然我同意其他人的观点，但如果您仍然坚持使用框架，您可以在 XHTML 中执行 index.html，然后在 HTML5 中执行框架的内容。

    【讨论】：

      猜你喜欢
      • 2013-08-23
      • 2012-01-31
      • 2013-04-23
      • 2012-02-22
      • 1970-01-01
      • 1970-01-01
      • 2014-09-27
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode