iframe dynamically loads the pdf preview and automatically adapts to the page size

1. Add a button on the web page to guide you to the sub-page

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

use? XXX = aaaa to pass the parameter XXX

 

2. Use getQueryVariable function to get parameters

  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);
    }

You can use alter to suggest whether the parameters are correctly obtained

alter(getQueryVariable("pdfname"))

 3. Dynamically load src

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

 Load src according to iframe id

4. Adapt to chrome browser adaptive page size

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

5. Overall page 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>

 

Guess you like

Origin blog.csdn.net/qq_41854291/article/details/105521951