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

向右看齐 2023-07-25 11:29 33阅读 0赞

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

用 ？ XXX= aaaa 来传递参数 XXX

# 2.用getQueryVariable函数，获取参数 #

可以用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">
        
        <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>