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>