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

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>

猜你喜欢

转载自blog.csdn.net/qq_41854291/article/details/105521951
今日推荐