本文介绍两种在纯静态HTML页面间传递参数及获取数据的方法。第一种利用URL锚点特性，通过修改window.location将背景色、宽度等参数传递给目标页面，并在目标页解析location.hash获取值。第二种通过动态创建隐藏的iframe加载目标页面，利用contentDocument访问其DOM，从而在源页面获取目标页面的元素或变量。
静态页面间参数传递与数据交互方案
在实际项目开发中，常遇到以下场景：
存在两个静态HTML文件，分别为a.html和b.html。
场景一：a页面已处于打开状态，而b页面尚未加载。此时需要在a页面配置一系列参数（如背景色、元素宽度等），并将这些参数传递给b页面，使得b页面在加载时即可直接应用这些配置。
场景二：无论b页面是否已经打开，a页面都需要获取b页面中的某些DOM元素或变量数据，以便在a页面中进行后续处理或展示。
前提条件：上述方案仅适用于同源页面，不涉及跨域资源共享问题。
经过分析，针对上述两个场景分别提出可行的解决方案。
利用URL锚点传递参数
针对场景一，可以利用HTML页面锚点（Hash）的特性，将参数附加在URL后传递给b页面。
以下是a页面的实现代码：
<button>跳转设置</button>
<script>
var btn = document.querySelector('button');
console.log(window);
btn.addEventListener('click', function(){
window.location = 'ci.html#bgc=#369?wd=500'
})
</script>
从代码可以看出，点击按钮后，页面跳转的URL末尾会追加一系列参数。这种操作不会改变基础跳转地址，但b页面打开后，可以通过截取location字符串解析出变量及其值，进而应用这些参数。
以下是b页面的实现代码：
<div></div>
<script>
var div = document.querySelector('div');
var bl = window.location.hash.slice(1).split('?');
if(bl.length >= 1){
for(var i = 0; i < bl.length; i += 1){
switch (bl[i].split('=')[0]) {
case 'bgc':
document.body.style.background = bl[i].split('=')[1];
break;
case 'wd':
div.style.width = bl[i].split('=')[1] + 'px';
break;
default:
null;
break;
}
}
}
</script>
通过解析URL字符串提取传递过来的变量并应用到页面元素，即可实现参数传递功能。
通过隐藏iframe获取页面数据
针对场景二，思路是通过创建一个隐藏的iframe来实现数据获取，这本质上是一种间接访问手段。
在a页面中动态创建一个iframe元素，将其src属性指向b页面的地址，并将display样式设置为none（隐藏）。随后，通过访问该iframe的contentDocument属性，即可获取到b页面的文档对象模型。
在获取到的文档对象中，查找所需的元素或变量，并将其应用到a页面中。
以下是完整的参考源码：
<span>11111111111</span>
<script>
var fram = document.createElement('iframe');
fram.src = 'http://www.vip.com/kongzhi/fram2.html';
fram.style.display = 'none';
document.body.appendChild(fram);
fram.onload = function(){
var doc = fram.contentDocument || fram.contentWindow.document;
var p = doc.querySelector('p');
document.body.appendChild(p);
}
</script>
以上即为JS控制静态页面之间传递参数、获取参数并应用的完整实现方案，供开发者参考使用。