网页使用 iframe 嵌入部分其他网页

在网页中嵌入其他网页中的一部分

简介

iframe 元素会创建包含另外一个文档的内联框架，平时使用不多，但是也确实蛮好用的，比如在博客关于页面中嵌入了一个网易云音乐的播放插件，但是有时在嵌入其他页面时直想截取部分嵌入，再此解决。

如何使用

最简单的加载

加载一个北京的天气预报，伴随着一堆广告与热搜。

代码

<iframe src="https://www.baidu.com/s?wd=天气预报" width="100%" height="400px" sframeborder="0"></iframe>

示例

仅截取天气预报地图部分并嵌入在网页中

原理

1. 加载一个 iframe 标签，设置网页长度宽度拉伸网页确保样式符合预期，重要内容无广告遮挡。
   
2. iframe 外层添加 div 标签，用于移动 iframe 嵌入网页的坐标，宽度高度为实际选取内容宽度高度，参考 CSS margin 属性 设置偏移量
3. div 外层在添加一层 div 标签作为遮罩层，用于遮罩偏移量产生的多余信息，宽度高度为实际选取内容宽度高度，设置边框 0 与溢出隐藏 CSS overflow 属性
   

代码

<div style="width:540px;height:422px;overflow:hidden;border:0px;"> 
  <div style="width:720px;height:440px;margin:-238px 0px 0px -150px;"> 
   <iframe src="https://www.baidu.com/s?wd=天气预报" height="600" width="1280" frameborder="0"></iframe> 
  </div> 
</div>

示例

其他示例(嵌入可交互网页)

另一篇博客 Luminox 8821 更换电池 中嵌入日本官网(瑞士官网仅有文档美国官网被跳转成某东了)中的可交互页面

代码

<div style="width:100%;height:820px;overflow:hidden;border:0px;">
  <div style="width:100%;height:820px;margin:-152px 0px 0px 0px;">
   <iframe src="https://luminox.jp/watch-collection/land/recon-point-man-8820-series-ref8821-km/" scrolling="no" height="900" width="767" frameborder="0"></iframe>
  </div>
</div>

示例