Javascript 在覆盖上加载网页

我通过点击按钮创建了一个页面覆盖，但是我找不到加载http页面的方法，比如在这个覆盖上。我期待着加载一个覆盖内的迷你网页。有没有办法做到这一点？ 我知道iframe及其如何用于加载外部链接。如何将iframe用于此覆盖

$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
$（“#淡入包装器”）.fadeIn（）；
});
$（'#淡入包装器'）。单击（函数（）{
$（this.fadeOut（）；
});
});
#淡入淡出包装{
显示：无；
位置：固定；
高度：100vh；
宽度：100vw；
背景：rgba（0,0,0,0.5）；
}
您想要使用的是一个

HTML内联框架元素
允许您在框架内下一个外部网站。只需将它放在
淡入淡出包装器
元素中，即可实现您的目标


$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
$（“#淡入包装器”）.fadeIn（）；
});
$（'#淡入包装器'）。单击（函数（）{
$（this.fadeOut（）；
});
$（“#淡入包装关闭”）。单击（函数（）{
$（“#淡出包装器”）.fadeOut（）；
});
});
#淡入淡出包装{
显示：无；
位置：固定；
高度：100vh；
宽度：100vw；
背景：rgba（0,0,0,0.5）；
}
#褪色包装关闭{
位置：绝对位置；
顶部：20px；
右：20px；
}

接近
如果您只需要在页面内容中插入一个远程页面，您可以使用
iframe

<div id="fade-wrapper">
   <iframe src="myURL" style="width=100vw; height=100vh" frameBorder="0"></iframe>
</div>



有关iframe的更多信息：
嘿，非常感谢！然而，我得到一个错误，谷歌拒绝连接。即使我使用本地主机连接它。只有某些网站可以框架。无法加载google.com的原因是google正在发送一个“X-Frame-Options:SAMEORIGIN”响应头。此选项可防止浏览器显示与父页面不在同一域中的iFrame。哦，不，这很糟糕。我可能得想个办法绕过这个。对不起，我还是个新手。有没有办法在覆盖层内创建一个按钮来关闭覆盖层？我在示例中添加了一个关闭按钮