如何在每个 PDFObject div 的顶部插入内容？

Question

我使用以下代码在水平设计中展示一些 PDF：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 100%;
            height: 800px;
            /*overflow: auto;*/
            /*overflow-y: hidden;*/
            margin: 5 auto;
            white-space: nowrap
        }

        .pdfobject-container {
            /*width: 100%;*/
            max-width: 800px;
            height: 800px;
            margin: 5em 0;
            display: inline;
        }
        .pdfobject { border: solid 1px #666; max-width: 40%;}
    </style>
</head>
<body>

    <div id='scrolly'>
        <div id="pdf1" ></div>
        <div id="pdf2" ></div>
        <div id="pdf3" ></div>
    </div>

<script src="PDFObject-master/pdfobject.js"></script>
<script>

PDFObject.embed("../../overleaf/a/report.pdf", "#pdf1", {pdfOpenParams:{toolbar: '0'}, page: '1'});
PDFObject.embed("../../overleaf/b/report.pdf", "#pdf2", {pdfOpenParams:{toolbar: '0'}, page: '2'});
PDFObject.embed("../../overleaf/c/report.pdf", "#pdf3", {pdfOpenParams:{toolbar: '0'}, page: '3'});
// PDFObject.embed("../../overleaf/d/report.pdf", "#pdf4", options);
// PDFObject.embed("../../overleaf/e/report.pdf", "#pdf5", options);
</script>

</body>
</html>

我想在每个 PDF div 的顶部放一些文字，比如对 PDF 文档的简短描述。我该怎么做？

Answer 1

代码段

 // each pdf must have a heading stored in the array headings
var headings = ["This is the heading for pdf1", "This is the heading for pdf2", "This is the heading for pdf3"]
//get all pdfs container
all_pdf = document.getElementById("scrolly").children;
//loop through and change innerHTML of pdf 
for (var x = 0; x < all_pdf.length; ++x) {
  all_pdf[x].innerHTML = "<h1>" + headings[x] + "</h1>" + all_pdf[x].innerHTML;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Something</title>
  <style type="text/css">
    #scrolly {
      width: 100%;
      height: 800px;
      /*overflow: auto;*/
      /*overflow-y: hidden;*/
      margin: 5 auto;
      white-space: nowrap
    }
    .pdfobject-container {
      /*width: 100%;*/
      max-width: 800px;
      height: 800px;
      margin: 5em 0;
      display: inline;
    }
    .pdfobject {
      border: solid 1px #666;
      max-width: 40%;
    }
  </style>
</head>

<body>

  <div id='scrolly'>
    <div id="pdf1">PDF details1</div>
    <div id="pdf2">PDF details2</div>
    <div id="pdf3">PDF details3</div>
  </div>

  <script src="PDFObject-master/pdfobject.js"></script>
  <script

如何在每个 PDFObject div 的顶部插入内容？

How to insert content on top of each PDFObject div?

javascript

html

css

pdfobject