困扰了我好多天的问题,网上的动态加载高度都不行,浏览器会有跨域报错,下面提供两种方法
第一种方法
直接使用css就可以解决,但是我使用的是还是显示不全,但是总比只显示一点好
iframe {
display: block;
border: none;
height: 90vh;/*设置高度百分比,一直调到只有一个滚动调为止*/
width: 100%;
}
第二种方法
第二种方法是使用服务器代理解决,这个方法是问了AI给出的回答,下面贴代码
HTML iframe
<iframe id="targetIframe" src="proxy.php?url=<?= $taskinfo[$tid]['taskHelp'] ?>" style="width: 100%; border: none; height: 500px;"></iframe>
JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
const iframe = document.getElementById('targetIframe');
function adjustIframeHeight() {
try {
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
const scrollHeight = iframeDocument.body.scrollHeight || iframeDocument.documentElement.scrollHeight;
iframe.style.height = scrollHeight + 'px';
console.log('目标网页的高度:', scrollHeight);
} catch (e) {
console.error('无法访问 iframe 内容:', e);
}
}
// 页面加载完成后调整高度
iframe.onload = adjustIframeHeight;
// 定期检查高度变化(每 500ms 检查一次)
setInterval(adjustIframeHeight, 500);
});
</script>
PHP代理
proxy.php
<?php
// 记录日志
function logMessage($message) {
file_put_contents('proxy.log', date('Y-m-d H:i:s') . ' - ' . $message . PHP_EOL, FILE_APPEND);
}
try {
// 检查 URL 参数
if (!isset($_GET['url']) || !filter_var($_GET['url'], FILTER_VALIDATE_URL)) {
throw new Exception('无效的目标 URL');
}
// 限制允许访问的目标域名
$allowed_domains = ['你的域名'];
$url = $_GET['url'];
$parsed_url = parse_url($url);
if (!in_array($parsed_url['host'], $allowed_domains)) {
throw new Exception('不允许访问该域名');
}
// 发起 cURL 请求
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$response = curl_exec($ch);
if ($response === false) {
throw new Exception('cURL 请求失败: ' . curl_error($ch));
}
curl_close($ch);
// 替换资源路径为目标网页的绝对路径
$base_url = 'https://' . $parsed_url['host'];
$response = str_replace(
['src="/', 'href="/'],
['src="' . $base_url . '/', 'href="' . $base_url . '/'],
$response
);
// 返回目标网页的内容
header('Content-Type: text/html; charset=UTF-8');
echo $response;
} catch (Exception $e) {
logMessage($e->getMessage());
die('发生错误: ' . $e->getMessage());
}
?>