Question

这是东西。我只是使用iframe嵌入pdf文件，一旦单击选项卡，它通常会在浏览器的移动或响应视图中显示。但我刷新它迷路了。我想知道，我们如何在文件夹中使用pdf文件，而不是使用pdf文件的直接URL在浏览器中显示。请检查附件中的图像和代码。

<!DOCTYPE html>
<html>
<head>

	<!-- Bootstrap core CSS -->
    

    <!-- Custom fonts for this template -->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

    <!-- Plugin CSS -->
    <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" media="screen" href="css\animate.css">
    <link href="css/main.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/creative.min.css" rel="stylesheet">
    <link href="css/footer.css"  type="text/css" rel="stylesheet">
    <link href="css/mypro.css"  type="text/css" rel="stylesheet">
    <link rel="icon" href="img/favicon.png"/>


    <script src="https://unpkg.com/scrollreveal"></script>
	<title>申込書PDF</title>

	<style type="text/css">
		/* CSS for responsive iframe */
/* ========================= */

/* outer wrapper: set max-width & max-height; max-height greater than padding-bottom % will be ineffective and height will = padding-bottom % of max-width */
#Iframe-Master-CC-and-Rs {
  max-width: 1000px;
  max-height: 100%; 
  overflow: hidden;
}

/* inner wrapper: make responsive */
.responsive-wrapper {
  position: relative;
  height: 0;    /* gets height from padding-bottom */
  
  /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS:
    -webkit-overflow-scrolling: touch; overflow: auto; */
  
}
 
.responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  margin: 0;
  padding: 0;
  border: none;
}

/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-572x612 {
  padding-bottom: 107%;
}

/* general styles */
/* ============== */
.set-border {
  border: 5px inset #4f4f4f;
}
.set-box-shadow { 
  -webkit-box-shadow: 4px 4px 14px #4f4f4f;
  -moz-box-shadow: 4px 4px 14px #4f4f4f;
  box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
  padding: 40px;
}
.set-margin {
  margin: 30px;
}
.center-block-horiz {
  margin-left: auto !important;
  margin-right: auto !important;
}

	</style>
</head>
<body>
<div class="container">
	
				<!-- embed responsive iframe --> 
				<!-- ======================= -->

				<div id="Iframe-Master-CC-and-Rs" class="set-margin set-padding set-border set-box-shadow center-block-horiz">
				  <div class="responsive-wrapper 
				     responsive-wrapper-wxh-572x612"
				     style="-webkit-overflow-scrolling: touch; overflow: auto;">
            <!--please use any pdf to check-->
				    <iframe src="img/3pdf.pdf"> 
				      <p style="font-size: 110%;"><em><strong>ERROR: </strong>  
				An &#105;frame should be displayed here but your browser version does not support &#105;frames. </em>Please update your browser to its most recent version and try again.</p>
				    </iframe>
				    
				  </div>
				</div>
         <div class="col text-center">
      <button class="btn btn-primary"><a href="myprofile.html" style="color: #fff;">Back</a></button>
    </div>
    <hr>


</div>
</body>
</html>

为什么刷新浏览器后无法显示pdf文件？

0 个答案: