iframe在html中的简单使用

简单的聊聊iframe

我们在前端开发中，iframe的使用场景很多，即便是vue，react时代，我还是乐此不疲的在项目中使用iframe，因为它会隔离页面彼此的环境，避免造成一些不必要的干扰。

在同域下使用iframe

在同域下使用iframe,父级页面可以获取iframe页面里的信息，还可以操作iframe页面中的内容。
案例
在同域下没什么好说的，父页面可以随意控制子页面。

跨域下使用iframe

跨域下使用iframe,父页面是不能操作子页面的，但是子页面可以操作父页面。
而且，后台返回的头信息，还能够更加严格的控制iframe

res.setHeader('X-Frame-Options', 'DENY'); // 不允许此页面被iframe加载
res.setHeader('X-Frame-Options', 'SAMEORIGIN'); // 只可以在相同域名下加载
res.setHeader('X-Frame-Options', 'allow-from http://baidu.com/'); // 允许指定的url加载iframe,但是这个属性在chrome,firefox,opera并不好使,只在edge中兼容

案例
目前为止，没有找到跨域控制iframe页面内容的方法。