iframe 嵌入超链接页面只展示某一部分,class名字为 line-chart-content的这一部分,代码示例
时间: 2024-09-23 07:13:48 浏览: 67
如果你想通过IFrame嵌入一个超链接页面,并仅显示特定部分,比如`class`名为`line-chart-content`的部分,可以这样做:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#contentWrapper {
position: relative;
overflow: hidden;
}
.line-chart-content {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="contentWrapper">
<iframe id="embeddedFrame" name="embeddedFrame" class="line-chart-content" src="https://example.com/full-page.html"></iframe>
</div>
<!-- 或者如果你能控制源页面的HTML结构 -->
<!-- 在源页面的这部分添加一个id,如: <div id="lineChartContent"> ... </div> -->
<!-- 然后修改以下代码: -->
<!-- ... -->
<iframe id="embeddedFrame" name="embeddedFrame" class="line-chart-content" srcdoc="<html><body><div id='lineChartContent'>...</div></body></html>"></iframe>
</body>
</html>
```
这里的关键在于使用CSS来隐藏`iframe`之外的内容(例如`:not(.line-chart-content)`),而对`.line-chart-content`进行绝对定位使其占据整个`iframe`空间。请注意,这种方式依赖于源页面的配合,即它应有一个具有对应ID或class的元素供你选择。
阅读全文