今天有一个需要，当检索跳转到对应页面之后

将检索词带到新的页面中，并在新页面中对检索词进行高亮展示

新页面中的数据来源是通过iframe集成的，检索词也是在iframe中包含着

结论：想要实现iframe中的指定字段高亮，需要得到iframe调用页面的开发者进行配合

方案一：使用postMessage进行通信：直接通过iframe将指定值传给，页面开发者，开发者获取这个值之后进行高亮操作

方案二：代理服务器：使用代理服务器来中转请求和响应，让代理服务器去请求iframe加载的页面，并修改响应后返回给主页面。这种方法需要有一个可以访问iframe所在域的代理服务器。

尝试方案一：直接通过主页面修改实现指定字段高亮

全局DOM遍历，对所有element进行检验，当发现有指定字段时，进行高亮替换

const highlightedText = event.data; 
const iframeDocument = this.$refs.iframe.contentDocument; 
const elements =iframeDocument.querySelectorAll(":not(iframe):not(script):not(style)"); 
elements.forEach((element) => { const regex = new RegExp(highlightedText, "gi"); 
const html = element.innerHTML; 
element.innerHTML = 
    html.replace(regex, `<span style='background-color: yellow;'>${highlightedText}</span>`); });

通过以上方法能够实现同页面的字段高亮，当涉及到iframe中间的字段时，失效

尝试方案二：对iframe进行操控

遇到sandbox字段，原本以为是可以通过其控制嵌入页面，

后发现其作用是控制嵌入内容对主页面的修改，而不能控制主页面对嵌入内容的修改。

最终结论

实现高亮的方案如下：

1. 在同域的情况下直接修改
2. 通过iframe将指定值传给页面开发者，由开发者获基于这个值执行高亮脚本
3. 使用代理服务器来中转请求和响应，让代理服务器去请求iframe加载的页面，并修改响应后返回给主页面。这种方法需要有一个可以访问iframe所在域的代理服务器。