iframe 动态加载pdf预览且自动适应页面大小

最新推荐文章于 2024-06-14 15:41:51 发布

zolty

最新推荐文章于 2024-06-14 15:41:51 发布

阅读量7.9k

点赞数 2

本文链接：https://blog.csdn.net/qq_41854291/article/details/105521951

版权

1.在网页加上按钮引导进入子页面

<li>
    <a class="J_menuItem" href="pdf.html?pdfname=pdf/1.1.pdf">1.1</a>
</li>

用？ XXX= aaaa 来传递参数 XXX

2.用getQueryVariable函数，获取参数

  function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

可以用alter来建议是否正确获取到参数

alter(getQueryVariable("pdfname"))

3.动态加载src

    iframe.src = getQueryVariable("pdfname")+"#view=FitH,top"

根据iframe id 来加载src

4.适配chrome浏览器自适应页面大小

接入参数#view=FitH,top

src ="pdf/aa.html#view=FitH,top"

5.整体页面demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>pdf预览</title>
    <style>
        iframe{width: 100%;height: 100%;padding: 0;margin: 0; border: none;}
    </style>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body>
    <iframe id="iframe" ></iframe>
</body>
<script>
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    iframe.src = getQueryVariable("pdfname")+"#view=FitH,top"
</script>
</html>

zolty

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
iframe 动态加载pdf预览且自动适应页面大小

1.在网页加上按钮引导进入子页面<li> <a class="J_menuItem" href="pdf.html?pdfname=pdf/1.1.pdf">1.1</a></li>用？ XXX= aaaa 来传递参数 XXX2.用getQueryVariable函数，获取参数 function getQuer...
复制链接

扫一扫