初识 内嵌iframe

iframe的基本介绍与使用

介绍

iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用<iframe>标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。

基础使用

<iframe>标签的基本用法如下：

<iframe src="URL"></iframe>
例如：<iframe src="https://www.example.com"></iframe>

属性

除了src属性，还可以使用其他属性来设置iframe的行为和样式，如allow、allowfullscreen、class、frameborder、height、width等

allow 允许特定功能的列表，如fullscreen，geolocation等

allowfullscreen 指定是否允许在iframe中使用全屏模式

allowpaymentrequest 指定是否允许在iframe中进行支付请求

allowtransparency 指定iframe是否可以是透明的

class 为iframe定义一个或多个类名

frameborder 指定是否在iframe周围显示边框

height 指定iframe的高度

importance 指定iframe对页面内容的重要性

loading 指定iframe加载时的行为

name 为iframe定义一个名称

referrerpolicy 指定如何发送referer HTTP标头

sandbox 启用iframe的沙盒模式，提高安全性

src 指定要在iframe中显示的文档的URL

srcdoc 在iframe中嵌入HTML代码而不是外部文档

style 定义iframe的CSS样式

title 为iframe定义一个标题

width 指定iframe的宽度

传值

URL传参

可以在iframe的src属性中使用查询参数（也称为URL参数）将数据传递到嵌入的页面。例如，假设iframe嵌入的页面URL是https://baidu.com/list.html，那么可以使用如下的URL来传递数据：

<iframe src="https://baidu.com/list.html?param1=value1&param2=value2"></iframe>

在嵌入的页面中，可以使用JavaScript获取查询参数并使用它们：

var params = new URLSearchParams(window.location.search);
var param1 = params.get('param1');
var param2 = params.get('param2');			

获取当前路由的参数  vue2
this.$route.query.xxxkey

或者写一个函数获取对应的值（该方法来自拓维的一位前端工程师大佬）

//从url获取参数
export const getQuery = (name: string, url?: string) => {
  const params = new URLSearchParams(url || window.location.search);
  const value = params.get(name);
  if (value) {
    return value;
  }
  return getQueryString(name, url);
};
 
export const getQueryString = (name: string, url?: string) => {
  const reg = new RegExp('(^|&|/?)' + name + '=([^&]*)(&|$)', 'i');
  const r = encodeURI(url || window.location.search || window.location.href || window.location.hash)
    .substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
};

postMessage

还可以使用postMessage方法在父页面和子页面之间进行消息传递。父页面可以通过iframe的contentWindow属性获取子页面的window对象，并调用postMessage方法向子页面发送消息。子页面可以通过window.parent属性获取父页面的window对象，并调用postMessage方法向父页面发送消息。然后，可以使用window.addEventListener方法接收消息

// 1、父页面向子页面发送消息
let data = {type: 'answerResult', data: jsonData.data};
this.$refs.iframe.contentWindow.postMessage(data, '*');

// 2、子页面向父页面发送消息
let parentData = {type: 'passDataBack', data: passData};
window.parent.postMessage(parentData, '*');
 
// 3、接收消息方法
window.addEventListener('message', function (e) {})

动态使用

主要是根据src属性进行动态展示  可以自己试一下  很好玩 但是还没有实践  希望有机会可以实践一下项目

<!-- 就是把百度这个链接放进去就好了，然后我没做屏幕自适应高度 -->
<iframe id="divContent" border= "0"   vspace= "0"   hspace= "0" marginwidth= "0" marginheight= "0" height="100%"
    framespacing= "0"   frameborder= "0"   scrolling= "no"  width= "100%"  
    src= "https://chat18.aichatos.xyz/#/chat/1705651912502"> 
    </iframe>

特注意

虽然 <iframe> 标签可以很方便地实现上述功能，但是需要注意以下几点：

1.嵌入的网页必须与主页面同源，否则会受到浏览器的安全限制。

2.嵌入的网页可能会影响页面性能和加载速度，特别是当嵌入的网页包含大量的资源（如图片、CSS 和 JavaScript）时。

3.嵌入的网页可能会被恶意攻击者用于钓鱼或注入恶意代码的攻击，因此需要谨慎使用。

总之，在使用 <iframe> 标签时，需要仔细权衡其优缺点，确保安全和性能。