iframe 嵌入页面

最新推荐文章于 2025-11-29 14:15:00 发布
原创 最新推荐文章于 2025-11-29 14:15:00 发布 · 3.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

<iframe>是框架的一种形式，也比较常用到。

例子1。

<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>

不用多说了。

width插入页的宽；height插入页的高；scrolling 是否显示页面滚动条（可选的参数为 auto、yes、no，如果省略这个参数，则默认为auto）；frameborder  边框大小；

注意：URL建议用绝对路径

传说中百DU用：<iframe width=0 height=0 frameborder=0 scrolling=auto src=WWW .webjx.com></iframe>

黑了88*8。。。

例子2。

如果一个页面里面有框架。。随便点页面里的连接，要求在这个<iframe> 里打开。在iframe 中加入name=** （**自己设定）

<iframe name=**  ></iframe>

然后在修改默认打开模式，：网页HEAD中加上<a href=URL target=**>或部分连接的目标框架设为（**）

例子3。

要插入一个页面。要求只拿中间一部分。其他的都不要。，。。

代码：

<iframe name=123  align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="http://www.webjx.com/"  frameborder=no scrolling=no  width=776  height=2500></iframe>

控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0；控制框架覆盖上部分的深度 vspace=-170 

scrolling滚动条要否（auto、yes、no）   frameborder框架的边框大小，width=776  height=2500此框架的大小。

一、页面内加入iframe

<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>，

scrolling表示是否显示页面滚动条，可选的参数为auto、yes、no，如果省略这个参数，则默认为auto。

二、超链接指向这个嵌入的网页，只要给这个iframe命名就可以了。方法是<iframe name=**>，例如我命名为aa，写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://www.cctv.com></iframe>，然后，网页上的超链接语句应该写为：<a  href=URL target=aa>

三、如果把frameborder设为1，效果就像文本框一样

透明的IFRAME的用法

必需IE5.5以上版本才支持

在transparentBody.htm文件的<body>标签中，我已经加入了style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解：

<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME> 

<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME>

<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>

<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME>

初识 内嵌iframe
m178398家里有只小肥猫
03-29 4214
iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。
iframe嵌入页面跨域通信
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
09-07 7215
在项目中可能会通过iframe直接将另一个页面嵌入进来，某些场景下还可能会进行一些消息的传递通信。之前做过一次，就是我们开发的主系统，然后下面还有很多子系统，子系统都是通过iframe嵌入进来的，然后为了实现某些需求，需要将token传递给子系统，拱子系统使用，但是当时一直忙着开发，忘记记录了，所以这篇算是补上吧嵌入进来的页面的window跟我们现在的window已经不是同一个了，更不是同一个document。
iframe嵌入网页的一部分
05-27
iframe嵌入网页的一部分, 拿别人网页为你所用
HTML框架标签：iframe的使用与应用场景
最新发布
fykam的博客
11-29 802
本文介绍了HTML中iframe标签的基本使用方法和应用场景。iframe（内联框架）允许在当前页面嵌入另一个网页，常用于广告展示、第三方插件集成和在线文档预览。文章详细讲解了iframe的基本语法和常用属性，并提供了完整代码示例演示如何嵌入百度搜索页面。同时，针对跨域访问问题，提出了JSONP、CORS和代理服务器等解决方案。掌握iframe的使用能够丰富网页功能，为后续学习HTML多媒体元素打下基础。
iframe：网页嵌入技术的强大工具
weixin_70208651的博客
03-20 1581
iframe，全称Inline Frame（内联框架），是HTML中的一个标签，用于在当前HTML页面中嵌入另一个文档或网页。这种技术允许网页设计者将外部资源（如视频、地图、广告等）无缝地集成到当前页面中，而无需离开当前页面。iframe的主要作用是实现网页的嵌套、跨域通信、异步加载、安全隔离和网页功能的扩展。iframe作为一种强大的网页嵌入技术，在网页设计中发挥着举足轻重的作用。通过合理使用iframe，可以极大地丰富网页的内容和功能性，提升用户体验。
iframe用法及高度自适应
wind4444的专栏
03-07 1090
是框架的一种形式，也比较常用到。 例子1： width插入页的宽；height插入页的高；scrolling 是否显示页面滚动条（可选的参数为 auto、yes、no，如果省略这个参数，则默认为auto）；frameborder  边框大小； 注意：URL建议用绝对路径 例子2： 如果一个页面里面有框架。。随便点页面里的连接，要求在这个 里打开。在iframe
[转]iframe嵌入网页的用法（实用）
weixin_30855099的博客
04-12 346
[转]iframe嵌入网页的用法（实用） 　iframe嵌入网页的用法作者：自由勇点击：MT-8000最后更新 2003-10-12 iframe并不是很常用的，在标准的网页中非常少用。但是有朋友经常问到，下面我简单地介绍一下它的用法，你只要熟练掌握这些参数足矣。 <iframe>也应该是框架的一种形式...
iframe嵌入链接本地环境正常，正式环境重定向到登录解决
02-28
### iframe嵌入链接本地环境正常，正式环境重定向到登录问题解决方案 #### 问题背景 在开发过程中，经常需要将一个网页嵌入到另一个网页中，通常的做法是使用HTML中的`<iframe>`标签来实现这一功能。但在实际操作中...
iframe嵌入页面实现免登录思路（以vue为例）
guygg88的博客
05-09 1075
在一些应用场景中，可能需要将某个页面通过iframe嵌入到另一个应用中，并实现免登录功能。本文以Vue.js为例，详细介绍如何通过iframe实现免登录功能的思路和步骤。
Iframe 嵌入： 页面嵌入并保持自适应页面的宽高并铺满整个屏幕
虎康的博客
03-14 7655
当我们使用 Iframe 嵌入页面后，会看到它只在小小的一部分进行展示，如何让它铺满整个屏幕。在上面的示例中，我们创建了一个Vue组件，利用标签将指定的URL页面嵌入到Vue应用中。在上面的示例中，我们使用CSS样式来实现让嵌入的。类设置了宽度和高度均为100%，从而使得。类设置了固定定位，并且铺满整个屏幕，自适应页面的宽高并铺满整个屏幕。可以根据父容器的大小进行自适应。
iframe页面的"内嵌框架"
chunmeizhang_88的博客
09-14 879
iframe 在实际项目中是非常常见的,作用:在当前页面中 可以通过 iframe 来查看另一个页面; <a href="cctv1.html" target="box"></a> <div> <iframe src="cctv2.html" frameborder="0" name="box"></iframe&gt...
iframe嵌入网页
weixin_30319153的博客
09-29 230
<iframe src="Orderforms.html" name="OrderFrom" id="OrderFrom" width="970" height="572" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe> 转载于:https://www.cnblogs.c...
iframe嵌套详解
热门推荐
欢迎欢迎
06-29 1万+
通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。但是，有追求的我们，并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么
iframe用法及自适应内容高度
hb___z的博客
04-03 298
一、用法：   1、页面内加入iframe        &lt;iframe width=420 height=330 frameborder=0 scrolling=auto src=URL&gt;&lt;/iframe&gt;        scrolling表示是否显示页面滚动条         可选的参数为auto、yes、no，如果省略这个参数，则默认为auto。   2、超链...
使用iframe标签嵌入外部网页的示例及详解
m0_73734137的博客
01-06 4323
iframe（内联框架）是一种HTML元素，它允许在一个网页中嵌入另一个网页。通过使用iframe，可以在一个页面中显示来自不同源的内容，例如嵌入另一个网站的地图、视频或表单等。属性指定了iframe的宽度和高度。如果浏览器不支持iframe标签，那么会显示。在这个示例中，我们使用iframe元素来嵌入一个网页，其中。属性指定了要嵌入的页面的URL，
HTML中iframe嵌入技术指南：提升页面灵活性与可嵌入性
weixin_42612405的博客
11-20 6354
本文还有配套的精品资源，点击获取 简介：本教程详细介绍了HTML中 <iframe> 标签的使用，包括其定义、嵌入网页的方法、适用场景、属性与样式设置，以及跨域问题和SEO影响。 <iframe> 是HTML5中的一个标签，它允许将其他网页或资源嵌入到当前页面中，提供了页面设计的灵活性和可嵌入性。教程还讨论了在不同场景下如...
用iframe嵌入另外一个页面
farmerXU的博客
05-18 1147
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #anli{position: absolute;top:0;}
iframe内嵌框架元素
m0_75112012的博客
06-22 1250
iframe 是一个强大但需要谨慎使用的工具，适用于需要强隔离性的场景。在使用时，应优先考虑安全性、性能优化和跨域通信方案，并根据具体需求权衡是否使用 iframe 或其他替代技术（如 Web Components、微前端）。
Iframe----在前后端不分离的项目中使用，造福人类，在网页中嵌入其他内容的强大工具
weixin_42013974的博客
01-24 2835
Iframe的使用
iframe嵌入页面跨域
02-26
### 如果解决iframe嵌入页面时遇到的跨域问题 当使用iframe嵌入其他域名下的资源时，可能会遭遇跨域限制。这主要是由于现代浏览器的安全策略所引起的，特别是对于第三方Cookie的支持逐渐减少。针对这一情况，存在多种解决方案。 #### 方案一：统一主域名 官方推荐的方法是采用统一主域名的方式[^1]。这意味着所有的子系统都部署在同一顶级域名下，比如`example.com`及其子域名如`sub.example.com`。这样做能够有效规避大多数由跨域引发的问题，因为同源政策允许这些站点之间共享数据而无需额外配置。 #### 方案二：调整服务器响应头设置 另一种常见做法是在服务端修改HTTP头部信息来支持CORS(Cross-Origin Resource Sharing)，即跨源资源共享协议。具体来说，在返回HTML文档的同时附加上如下所示的相关字段： ```http Access-Control-Allow-Origin: * // 或者指定特定来源 Access-Control-Allow-Origin: https://yourdomain.com ``` 此外还可以加入更多控制选项以增强安全性并满足实际需求: ```http Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization Access-Control-Max-Age: 86400 ``` 以上措施有助于确保客户端可以从不同的源安全地访问API接口或静态文件等内容[^2]。 #### 方案三：借助代理中间件 如果无法更改目标网站的服务端配置，则可考虑建立自己的反向代理服务器作为中介层。该代理位于同一原点内，并负责转发请求至远程地址；与此同时它也会处理好必要的身份验证流程以及Cookies管理等问题。这种方式特别适用于那些对外部系统的依赖程度较高的应用场景中[^4]。 #### 实现示例 - 使用Vue.js框架中的动态创建Proxy Iframe技术 这里给出一段基于Vue3项目的简单代码片段用于展示如何实现上述提到的技术之一——通过在子窗口(child)内部构建指向本地路径(proxy)的新IFRAME实例来进行间接通信的过程: ```javascript import { ref, onMounted } from 'vue'; export default { setup() { const frameSrc = ref(''); // 假设这是来自路由元数据里的URL字符串 let currentRouteMetaFrameSrc = '/path/to/proxy.html'; onMounted(() => { setTimeout(function () { var proxyIfr = document.createElement('iframe'); proxyIfr.src = `${location.origin}${currentRouteMetaFrameSrc}?data=encodedMessage`; proxyIfr.style.display = "none"; document.body.appendChild(proxyIfr); window.addEventListener('message', receiveMessage); function receiveMessage(event){ console.log(`Received message: ${event.data}`); // 处理接收到的消息... // 移除监听器防止内存泄漏 window.removeEventListener('message', receiveMessage); } }, 500); }); return { frameSrc, }; }, }; ``` 此段脚本会在组件挂载完成后等待半秒钟再执行后续逻辑，从而保证DOM结构已完全渲染完毕。之后会临时插入一个隐藏式的IFRAME标签到当前网页体内并通过查询参数携带所需传输的数据给定好的处理器页面(proxy.html)。最后注册了一个全局事件监听函数用来接收从那个新打开的小窗传回来的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值