iframe将一个外部网页的一部分嵌入到当前网页中的代码
时间: 2024-03-30 19:37:04 浏览: 15
以下是将一个外部网页的一部分嵌入到当前网页中的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>嵌入外部网页的一部分</title>
<style>
#external-content {
width: 100%;
height: 300px;
overflow: scroll;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>当前网页</h1>
<iframe id="external-page" src="https://www.example.com"></iframe>
<script>
window.onload = function() {
var externalPage = document.getElementById("external-page");
var externalContent = externalPage.contentDocument.querySelector(".external-content");
var iframe = document.createElement("iframe");
iframe.id = "embedded-content";
iframe.width = "100%";
iframe.height = "300px";
iframe.srcdoc = externalContent.outerHTML;
externalPage.parentNode.replaceChild(iframe, externalPage);
};
</script>
</body>
</html>
```
在这个示例中,我们首先创建了一个iframe元素,指定了它的src属性为外部网页的URL。然后,我们在JavaScript中使用了window.onload事件处理程序,等待外部网页加载完成后,获取外部网页中的指定元素(这里假设外部网页中有一个类名为"external-content"的元素),将它的HTML代码插入到一个新的iframe元素中,最后将该iframe元素替换掉原先的iframe元素。这样,就可以将外部网页的一部分嵌入到当前网页中。