如何将div放在两个iframe上,其中一个iframe具有外部(不同域)内容？
要将div放在两个iframe上，其中一个iframe具有外部（不同域）内容，您可以使用以下方法：
- 在主页面中创建两个iframe，一个用于内部内容，另一个用于外部内容。
- 使用CSS将div放在两个iframe上。
- 使用JavaScript或jQuery处理跨域问题。
以下是一个简单的示例：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div on Iframes</title>
<style>
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.div-on-iframes {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<iframe src="internal.html" frameborder="0"></iframe>
<div class="div-on-iframes">Div on Iframes</div>
</div>
<div class="container">
<iframe src="https://external.com" frameborder="0"></iframe>
<div class="div-on-iframes">Div on Iframes</div>
</div>
<script>
// 处理跨域问题
window.addEventListener('message', function(event) {
if (event.data === 'loaded') {
event.source.postMessage('Hello from main page', event.origin);
}
});
</script>
</body>
</html>internal.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Iframe</title>
<script>
window.addEventListener('message', function(event) {
if (event.data === 'Hello from main page') {
console.log('Received message from main page:', event.data);
}
});
window.parent.postMessage('loaded', '*');
</script>
</head>
<body>
<h1>Internal Content</h1>
</body>
</html>这个示例中，我们创建了两个iframe容器，一个用于内部内容（internal.html），另一个用于外部内容（external.com）。我们使用CSS将div放在两个iframe上，并使用JavaScript处理跨域问题。
请注意，这个示例仅用于演示目的，实际应用中可能需要根据具体需求进行调整。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
