首页
前端开发
使用 iframe 替代 html5 中的框架

使用 iframe 替代 html5 中的框架 [英] Alternative for frames in html5 using iframes

查看：28 发布时间：2021/12/21 22:57:32 jquery html iframe frameset

本文介绍了使用 iframe 替代 html5 中的框架的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<frame src="menu.html"><frame src="events.html"></框架集>

解决方案

框架已被弃用，因为它们给 url 导航和超链接带来了麻烦，因为 url 只会将索引页(带有框架集)带到您面前，并且无法指定每个框架窗口中的内容.如今，网页通常由服务器端技术生成，例如 PHP、ASP.NET、Ruby 等.因此，无需使用框架，只需将模板与如下内容合并即可生成页面:

模板文件

<头><title>{插入标题的脚本变量}</title><身体><div class="菜单">{由服务器端脚本插入这里的菜单项}

<div class="main-content">{主要内容由服务器端脚本插入这里}

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

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

你可以像这样模拟你的例子:

帧示例

<头><title>帧测试</title><风格>.菜单 {向左飘浮;宽度:20%；高度:80%；}.mainContent {向左飘浮;宽度:75%；高度:80%；}</风格><身体><iframe class="menu" src="menu.html"></iframe><iframe class="mainContent" src="events.html"></iframe>

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

I am new to HTML5 and I have done some research and found out that the use of <frameset> is outdated and from what I read <iframes> are not. So can someone help me, I want to obtain the same result as the example shown but while using <iframes> or another substitute for <frameset> that is not deprecated in HTLM5?

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

解决方案

Frames have been deprecated because they caused trouble for url navigation and hyperlinking, because the url would just take to you the index page (with the frameset) and there was no way to specify what was in each of the frame windows. Today, webpages are often generated by server-side technologies such as PHP, ASP.NET, Ruby etc. So instead of using frames, pages can simply be generated by merging a template with content like this:

Template File

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

If you don't have full support for a server-side scripting language, you could also use server-side includes (SSI). This will allow you to do the same thing--i.e. generate a single web page from multiple source documents.

But if you really just want to have a section of your webpage be a separate "window" into which you can load other webpages that are not necessarily located on your own server, you will have to use an iframe.

You could emulate your example like this:

Frames Example

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

There are probably better ways to achieve the layout. I've used the CSS float attribute, but you could use tables or other methods as well.

这篇关于使用 iframe 替代 html5 中的框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆