iframe嵌入网页自适应高度

困扰了我好多天的问题,网上的动态加载高度都不行,浏览器会有跨域报错,下面提供两种方法

第一种方法
直接使用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());
}
?>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值