javascript - 将 html 页面加载到 html 页面中会禁用滚动条

问题描述

嗨，我有一个名为 index.html 的主 html 页面，并且有一个 id 为 mirador 的新 div

在 main.js 中，这是一个与 index.html 关联的脚本，我有：

document.getElementById("mirador").style.visibility = "visible";
$("#mirador").load("mirador.html");

在我加载 mirador.html 之前，index.html 有一个滚动条，但是一旦我加载了 mirador.html，它就会被禁用。行的格式也会改变，例如：index.html 中的颜色。这是 mirador.html 的代码：

 <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="mirador-2.6.1/css/mirador-combined.css">
    <title>Mirador Viewer</title>
    <style type="text/css">
    body { padding: 0; margin: 0; overflow: hidden;}
    #viewer {width: 50%; height: 85%; bottom:0px; right: 20px; position: fixed; }
  </style>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"/>
</head>
<body>
  <div id="viewer"></div>

  <script src="mirador-2.6.1/mirador.js"></script>
  <script type="text/javascript">

    $(function() {
      Mirador({
        "id": "viewer",
        "layout": "1x1",
          "mainMenuSettings" :
          {


                "show": true,
                "buttons" : {"bookmark" : true, "layout" : true},
                "userLogo": {"label": "IIIF", "attributes": {"href": "http://iiif.io"}},
                "userButtons": [
                    {
                        "label": "Stats",
                        "iconClass": "fa fa-chart-pie",
                        "attributes": { "href": "stats/index.html"}
                    },
                    {
                        "label": "Load Annotation List",
                        "iconClass": "fa fa-upload",
                        "attributes": {"href": "populate.html"}
                    },
                    {
                        "label": "Index Manifest",
                        "iconClass": "fa fa-upload",
                        "attributes": { "href": "uploadManifest.html"}
                    },
                ]
          },
          'showAddFromURLBox' : true,
          "saveSession": true,
        "data": [
            { "manifestUri": "http://dms-data.stanford.edu/data/manifests/Walters/qm670kv1873/manifest.json", "location": "Stanford University"},
            { "manifestUri": "http://dms-data.stanford.edu/data/manifests/Stanford/ege1/manifest.json", "location": "Stanford University"},
            { "manifestUri": "http://dms-data.stanford.edu/data/manifests/BnF/jr903ng8662/manifest.json ", "location": "Stanford University"},
            { "manifestUri": "http://dams.llgc.org.uk/iiif/4574752/manifest.json", "location": "National Library of Wales"},
            { "manifestUri": "http://iiif.biblissima.fr/manifests/ark:/12148/btv1b84539771/manifest.json", "location":'BnF' },
            { "manifestUri": "http://iiif.biblissima.fr/manifests/ark:/12148/btv1b10500687r/manifest.json", "location": 'BnF'},
            { "manifestUri": "http://www.e-codices.unifr.ch/metadata/iiif/sl-0002/manifest.json", "location": 'e-codices'},
            { "manifestUri": "http://www.e-codices.unifr.ch/metadata/iiif/bge-cl0015/manifest.json", "location": 'e-codices'},
             { "manifestUri": "https://data.ucd.ie/api/img/manifests/ucdlib:40851", "location": "University College Dublin"},
             { "manifestUri": "https://data.ucd.ie/api/img/manifests/ucdlib:30708", "location": "University College Dublin"},
             { "manifestUri": "http://media.nga.gov/public/manifests/nga_highlights.json", "location": "National Gallery of Art"},
             { "manifestUri": "https://iiif.lib.harvard.edu/manifests/drs:48309543", "location": "Harvard University"},
             { "manifestUri": "https://purl.stanford.edu/rd447dz7630/iiif/manifest.json", "location": "Stanford University"},
             { "manifestUri": "https://manifests.britishart.yale.edu/manifest/5005", "location": "Yale Center For British Art"},
             { "manifestUri": "http://dams.llgc.org.uk/iiif/2.0/1465298/manifest.json", "location": "National Library of Wales"},
            { "manifestUri": "http://localhost:8080/examples/Cambrian_1804-01-28.json", "location": 'National Library of Wales'},
        { "manifestUri": "http://localhost:3001/api/manifests/9b4569b0-25e8-463d-bc7c-7efbf8a76576", "location": 'Notarial Archives Valletta'}
        ],
        "windowObjects": [],
          /** Testing Annotations **/
          annotationEndpoint: {
                name: 'Simple Annotation Store Endpoint',
                module: 'SimpleASEndpoint',
                options: {
                    url: 'annotation',
                  storeId: 'comparison',
                  APIKey: 'user_auth'
                }
          }
      });
    });
  </script>
</body>
</html>

标签： javascripthtml

javascript - 将 html 页面加载到 html 页面中会禁用滚动条

问题描述

解决方案

推荐阅读