同源站点下如何访问iframe内部DOM元素以获取购物车数据？

前置条件 #

• 首先需要满足浏览器同源策略：主页面和iframe加载的迷你购物车页面必须协议、域名、端口完全一致，否则浏览器会禁止跨域操作iframe内部DOM，这是安全限制无法绕过，只能用postMessage方案通信。

核心问题原因 #

你当前的代码执行时机早于iframe加载完成的时间，此时iframe内部DOM还没渲染完成，自然无法选中对应元素。另外getElementsByTagName返回的是类数组的HTMLCollection，需要通过索引取到实际的DOM元素。

正确实现代码 #

同源场景下的DOM操作方案 #

父页面JS代码：

var iframevar = document.getElementById('freeGiftiFrame');
// 监听iframe加载完成事件后再操作内部元素
iframevar.onload = function() {
  // 取集合中第一个pre元素
  var preElement = iframevar.contentWindow.document.getElementsByTagName("pre")[0];
  // 提取文本内容转JSON
  var cartInfo = JSON.parse(preElement.textContent.trim());
  // 输出结算金额
  console.log('购物车结算总金额：', cartInfo.miniCartPrice);
}

对应的HTML修正：
iframe标签内部嵌套的内容仅在浏览器不支持iframe时显示，实际加载的页面需要通过src属性指定：

<iframe id="freeGiftiFrame" class="cartPopout" name="iframe_a" src="你的迷你购物车页面URL" height="100px" width="100%"></iframe>

跨域场景下的postMessage通信方案 #

如果主页面和购物车页面不同源，需要购物车页面配合传递数据：

1. 迷你购物车（iframe内部页面）添加发送数据的代码：

// 构造购物车数据
const cartData = {"miniCartCount": 1, "miniCartPrice": "€ 30,00"};
// 向父页面发送数据，第二个参数建议替换为父页面的实际域名提升安全性
window.parent.postMessage(cartData, '*');

2. 父页面添加接收数据的代码：

window.addEventListener('message', function(event) {
  // 校验消息来源为可信域名，避免安全风险
  if (event.origin === '迷你购物车页面的实际域名') {
    console.log('购物车结算总金额：', event.data.miniCartPrice);
  }
})

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