html5-内联框架

最新推荐文章于 2023-03-09 21:11:39 发布
最新推荐文章于 2023-03-09 21:11:39 发布
阅读量375 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/houweidong/p/7492759.html
本文展示了一个使用HTML创建内联框架(iframe)的例子。通过设置iframe的高度为body的60%，实现了响应式布局效果，并提供了指向不同网站的链接，这些链接在同一个iframe中加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body style="height: 600px">当body设置style样式的时候垂直百分比有效。<br>
<a href="http://www.baidu.com" target="myframe"><img src="pic/baidu.png" alt="baidu"></a><br>
<a href="http://www.qq.com" target="myframe">www.qq.com</a><br>
<a href="http://6121919.cn" target="myframe">6121919.cn</a>
<iframe src="http://www.baidu.com" frameborder="1" width="100%" height="60%" name="myframe"></iframe>
</body>
</html>

转载于:https://www.cnblogs.com/houweidong/p/7492759.html

HTML5之内联框架和音视频标签
WQuestion的博客
09-01 319
1、内联框架 使用iframe标签向当前页面中引入其他页面 属性： -src指定要引入的网页的路径 -framborder指定内联框架的边框（只有0和1，0表示没有边框，1表示有边框） 2、音频标签 audio标签用于向页面中引入一个外部的音频文件 音频文件引入时，默认情况下，不允许用户自己控制播放停止 属性： -contr...
HTML-iframe内联框架和frameset框架集详解
主营前端方向，技术栈是vue
11-21 704
iframe内联框架和frameset框架集(引入多个其他的外部的页面，frameset 不能和 body 出现在同一页面，rows行、cols列)
HTML5 内联框架
DearLu1995的博客
04-24 661
1.内联框架 iframe 2.例子:创建4个html文件 第一个html文件index01 [code="html"] [/code] 第二个html文件framea.html [code="html"] 百度 [/code] 第三个html文件frameb.html [code="html"] [/code] 第四个html文件fr...
HTML5内联框架
若有博文对您有帮助，欢迎点赞关注，收藏评论。
02-15 315
<!DOCTYPE html> <html> <head> <title>内联框架</title> <meta http-equiv="Content-Type" content="text/html; utf-8"> </head> <body> <p><b>内联框架</b></p> .
HTML5内联框架iframe
qq_26310441的博客
08-25 665
frame标签已经过时了 但是还是要学习一下 创建3个frame    frame a-c 这3个  frame   只修改bgcolor frameset cols=20% 30% 50%》 row  横向表示row  过时了 引用《frame》  src frame a-c frame标签不能加到body中 通过iframe   iframe没有过时 有外边
XZ_HTML5之HTML框架和 HTML内联框架 iframe
understand_XZ的博客
07-25 2037
水平框架 frameset rows="25%,50%,25%">       frame src="First.html" />   frame src="Second.html" />   frame src="index.html" /> frameset> 框架结构标签 • 框架结构标签（）定义如何将窗口分割为框架 • 每个 frameset 定义了一系列行或列
深入剖析HTML5 内联框架iFrame
01-19
由于现在frame和frameset很少使用，已经过时了，已经被div+CSS代替了，所以，这里只是举例说明一下，当下还在使用的内联框架iFrame 所谓的iFrame内联框架，我的理解就是在网页内部嵌套一个网页，并且可以一级一级地...
HTML5内联框架案例.pdf
07-11
HTML5内联框架案例.pdf学习资料复习资料教学资源是关于HTML5内联框架的学习资源，主要针对HTML5内联框架的使用和实践。本文档给出了三个案例，分别演示了内联框架的基本用法、内联框架常用属性的使用和内联框架添加...
HTML5内联框架.pdf
07-11
HTML5内联框架 HTML5中的内联框架（iframe）是一种可以在网页中嵌入另一个网页或文档的技术。它可以自由控制窗口大小，可以配合表格随意地在网页中的任何位置插入窗口，实际上就是在窗口中再创建一个窗口。 内联...
HTML5-iframe内联框架、表单元素、功能组件
qq_61727355的博客
08-22 1317
在浏览器中按 F12 打开开发者工具，选择 Network，页面点击提交后会生成箭头所指的一条记录，点击该记录，在FormData处可看见提交信息。iframe标签与a标签的配合使用相当于a标签的target属性设为_self。3）与post 的对比：只需将上述代码的提交方式由get改为post即可。代码测试：只需在上述2中代码中添加几个元素即可。网页地址部分会附带提交的参数信息。src：引用页面地址。name：框架标识名。
学习HTML5记录-框架（iframe内联框架）
Heartbeats_m的博客
03-11 375
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;HTML框架&lt;/title&gt; &lt;/head&gt; &lt;!--frameborder边框--&gt; &lt;iframe src=&q
H5学习之12 iframe标签---内联框架
qq_29469941的博客
07-31 1770
html> lang="en"> charset="UTF-8"> bgcolor="#ffe4c4" text="red"> src="https://www.baidu.com/?tn=95505140_hao_pg" width="800" height="600" frameborder="0"> 在界面里显示其他网页 src规定位置，也可以是本地的一个htm
10、前端HTML5入门教程（内联框架）
m0_68955602的博客
03-09 130
前端HTML5入门教程
html5--1.16 内联框架
weixin_34250709的博客
11-26 115
html5--1.16 内联框架 学习要点： 1.iframe内联框架2.综合实例1 1.iframe内联框架 1.iframe元素用来在文档中添加一个内联框架。 2.iframe为body元素的子元素，必须放置在boay中使用 3.主要属性:src;name/id;width;height 4.对HTML5中已经删除的属性不再进行讲解 淘宝网 ...
HTML5学习（四）：图片、内联框架、音频和视频
激洪的博客
03-10 546
html之图片、内联框架、音频和视频
02html之列表、表格、、HTML5的结构元素、iframe内联框架、特殊符号
Denial_learn的博客
08-30 436
列表： 无序列表： 格式： <ul> <li></li> <li></li> </ul> 示例： <ul> <li>范冰冰演藏族女孩</li> <li>撞死两个人后自拍</li> <li&gt...
HTML Iframe（HTML内联框架）（有用哎哟！）
不再想当菜鸟了
03-11 5778
frame 用于在网页内显示网页。 添加 iframe 的语法 URL"> URL 指向隔离页面的位置。 Iframe - 设置高度和宽度 height 和 width 属性用于规定 iframe 的高度和宽度。 属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。 实例 亲自试一试 Iframe - 删除边框 frameborder
HTML5样式
Mrchuncui的博客
03-22 206
环境Windows 工具vscode 标签 <style>:样式定义 <link>:资源应用，比如可以应用css 属性 rel = “”：link标签的一个可选项，规定当前文件和被链接的url(使用href=""指定)之间的关系 type = “”:引入文档的类型 margin-left/right：控制边距 样式表插入方法 外部样式表： <li...
框架集 frameset
aoys602066的博客
08-20 501
　　　　　　　　框架集和内联框架的作用类似，都用于在一个页面中引入其他的外部的页面 　　　　　　　　　　框架集可以同时引入多个页面，而内联框架引入一个， 　　　　　　　　　　在h5标准中，推荐使用框架集，而不使用内联框架 　　　　　　　　使用 frameset 来创建一个框架集，注意 frameset 不能和 body 出现在同一个页面中 　　　　　　　　　　所以要使用框架集，页...
axure内联框架引入html
最新发布
03-12
<think>好的，我现在要解决用户在Axure中通过iframe引入外部HTML文件的问题。首先，我需要回忆一下Axure的基本操作和功能。Axure RP是一个原型设计工具，支持内联框架（Inline Frame）来嵌入外部内容，比如网页、图片或者其他资源。用户的需求是想在Axure中使用iframe来引入外部的HTML文件，可能需要展示交互效果或者动态内容。 接下来，我需要确认Axure是否支持内联框架加载本地HTML文件。根据之前的经验，Axure的内联框架可以通过设置链接或文件路径来加载内容。但需要注意，如果HTML文件是本地文件，可能在预览或生成原型时路径是否正确，或者是否需要将HTML文件与Axure项目放在同一目录下，或者通过服务器来访问。 然后，我需要考虑用户可能遇到的问题，比如路径设置错误、浏览器安全限制导致无法加载本地文件等。例如，Chrome浏览器默认不允许加载本地文件，除非通过特定的启动参数或者将文件放在服务器上。这可能会影响原型的预览效果，需要给用户提示这一点。 另外，Axure中的内联框架属性设置可能需要指定URL或文件路径。用户需要知道如何正确填写路径，可能需要使用相对路径或绝对路径。如果HTML文件与Axure项目文件在同一目录下，直接使用文件名即可；如果放在子文件夹中，需要加上文件夹路径。 还需要考虑如何指导用户操作，步骤是否清晰。比如，从元件库拖入内联框架，调整大小，然后在属性中设置链接。同时，提醒用户关于浏览器兼容性和本地文件加载的问题，可能建议使用Axure Cloud或其他在线托管方式来避免路径问题。 最后，生成相关问题的时候，要围绕内联框架的其他用途、Axure的交互设计、浏览器限制等展开，帮助用户进一步了解相关知识点。</think>在Axure中通过内联框架引入外部HTML文件，可通过以下步骤实现： 1. **拖放内联框架元件** 在元件库的"默认"分类中找到"内联框架"元件（图标为方框内显示地球），将其拖至画布并调整尺寸至合适大小 2. **设置框架属性** 双击内联框架，在属性面板的"链接到外部URL或文件"中输入： ```html iframe.html ``` 若HTML文件存放在Axure项目目录的`files`子目录中则应填写： ```html files/iframe.html ``` 3. **设置交互样式（可选）** 通过"样式"选项卡可添加边框样式，或通过"交互样式"设置鼠标悬停/点击效果。若要实现自适应高度，需在HTML文件中添加自适应脚本： ```javascript window.onload = function() { parent.postMessage(document.body.scrollHeight, '*'); } ``` **注意事项**： - 本地预览时需使用Axure内置预览（F5），直接浏览器打开可能因跨域限制无法加载[^4] - 部署到Axure Cloud时需将HTML文件作为附件上传[^2] - Chrome浏览器默认禁止加载本地资源，建议使用Firefox测试本地原型[^1]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值