iframe的基本介绍与使用

<iframe src="URL"></iframe>

<iframe src="index.com/page.html?param1=value1&param2=value2"></iframe>

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

//从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;
};

// 发送消息给接收方窗口
window.parent.postMessage("Hello, parent!", "http://parent.com");

// 监听message事件，接收消息
window.addEventListener("message", receiveMessage, false);
 
function receiveMessage(event) {
  // 判断消息来源是否是指定的发送方窗口
  if (event.origin === "http://child.com") {
    // 处理接收到的消息
    console.log(event.data);
  }
}

const iframe = document.getElementById('my-iframe');
const iframeWindow = iframe.contentWindow;

const message = { type: 'GREETINGS', data: 'Hello, child!' };
const targetOrigin = 'http://child.com'; // 指定接收方的源
iframeWindow.postMessage(message, targetOrigin);

window.addEventListener('message', receiveMessage, false);
 
function receiveMessage(event) {
  if (event.origin === 'http://parent.com') { // 验证消息来源
    console.log(event.data); // 处理接收到的消息
  }
}