如何向无基础URL的内嵌（注入式）iframe发送推送通知？

针对你这种通过JS动态注入、无独立基础URL的iframe场景，以下几种方案可以实现推送通知：

1. 利用postMessage跨上下文通信 #

这是最通用的跨iframe通信方式，不管iframe是about:blank还是data URI都能生效：

• iframe侧代码（注入的JS中）：

// 监听来自父页面的消息
window.addEventListener('message', (event) => {
  // 可验证消息来源确保安全
  if (event.data.type === 'push-notification') {
    // 在这里处理通知逻辑，比如显示自定义弹窗
    showCustomNotification(event.data.content);
  }
});

function showCustomNotification(content) {
  // 实现你的通知UI，比如创建一个固定定位的弹窗
  const notice = document.createElement('div');
  notice.style.cssText = 'position:fixed;top:20px;right:20px;padding:16px;background:#333;color:white;border-radius:4px;z-index:9999;';
  notice.textContent = content;
  document.body.appendChild(notice);
  setTimeout(() => notice.remove(), 3000);
}

• 父页面/注入脚本的主逻辑侧：

// 假设你已保存了注入的iframe引用
const injectedIframe = document.getElementById('your-plugin-iframe');

// 发送通知消息
injectedIframe.contentWindow.postMessage(
  { type: 'push-notification', content: '新订单提醒' },
  '*' // 若能确定目标域，替换为具体域名提升安全性
);

2. 直接调用iframe全局方法 #

由于iframe是你动态创建并注入的，可以直接保留其window对象引用，调用内部预设的通知函数：

// 动态创建iframe的代码
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);

// 向iframe注入脚本后，直接挂载全局通知方法
iframe.contentWindow.showNotification = function(content) {
  // 这里写通知逻辑，和上面的showCustomNotification一致
  const notice = document.createElement('div');
  notice.style.cssText = 'position:fixed;top:20px;right:20px;padding:16px;background:#333;color:white;border-radius:4px;z-index:9999;';
  notice.textContent = content;
  document.body.appendChild(notice);
  setTimeout(() => notice.remove(), 3000);
};

// 后续需要发通知时直接调用
iframe.contentWindow.showNotification('库存预警');

3. 触发自定义事件 #

通过自定义事件传递通知数据，逻辑更解耦：

• iframe侧：

window.addEventListener('plugin-notify', (event) => {
  showCustomNotification(event.detail.content);
});

// 复用之前的showCustomNotification函数
function showCustomNotification(content) {
  const notice = document.createElement('div');
  notice.style.cssText = 'position:fixed;top:20px;right:20px;padding:16px;background:#333;color:white;border-radius:4px;z-index:9999;';
  notice.textContent = content;
  document.body.appendChild(notice);
  setTimeout(() => notice.remove(), 3000);
}

• 主逻辑侧：

const notifyEvent = new CustomEvent('plugin-notify', {
  detail: { content: '促销活动通知' }
});
injectedIframe.contentWindow.dispatchEvent(notifyEvent);

注意：浏览器原生的Notification API依赖域名权限，这种无基础URL的iframe无法使用，只能通过自定义UI实现通知；如果iframe注入到第三方跨域页面，务必在postMessage中指定具体目标域，避免安全风险。

内容的提问来源于stack exchange，提问作者Mustafa Alfar