Fatal编程技术网
  • javascript/
  • Javascript 将html页面加载到html页面将禁用滚动条

Javascript 将html页面加载到html页面将禁用滚动条

javascript html

Javascript 将html页面加载到html页面将禁用滚动条,javascript,html,Javascript,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的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>


米拉多查看器
正文{填充：0；边距：0；溢出：隐藏；}
#查看器{宽度：50%；高度：85%；底部：0px；右侧：20px；位置：固定；}
$（函数（）{
米拉多({
“id”：“查看器”，
“布局”：“1x1”，
“主菜单设置”：
{
“秀”：真的，
“按钮”：{“书签”：true，“布局”：true}，
“userLogo”：{“label”：“iif”，“attributes”：{“href”：”http://iiif.io"}},
“用户按钮”：[
{
“标签”：“统计数据”，
“iconClass”：“fa图表饼图”，
“attributes”：{“href”：“stats/index.html”}
},
{
“标签”：“加载注释列表”，
“iconClass”：“fa上传”，
“属性”：{“href”：“populate.html”}
},
{
“标签”：“索引清单”，
“iconClass”：“fa上传”，
“属性”：{“href”：“uploadManifest.html”}
},
]
},
“showAddFromURLBox”：true，
“saveSession”：true，
“数据”：[
{“宣言”：http://dms-data.stanford.edu/data/manifests/Walters/qm670kv1873/manifest.json，“地点”：“斯坦福大学”}，
{“宣言”：http://dms-data.stanford.edu/data/manifests/Stanford/ege1/manifest.json，“地点”：“斯坦福大学”}，
{“宣言”：http://dms-data.stanford.edu/data/manifests/BnF/jr903ng8662/manifest.json ，“地点”：“斯坦福大学”}，
{“宣言”：http://dams.llgc.org.uk/iiif/4574752/manifest.json，“地点”：“威尔士国家图书馆”}，
{“宣言”：http://iiif.biblissima.fr/manifests/ark:/12148/btv1b84539771/manifest.json“，”位置“：'BnF'}，
{“宣言”：http://iiif.biblissima.fr/manifests/ark:/12148/btv1b10500687r/manifest.json，“位置”：“BnF”}，
{“宣言”：http://www.e-codices.unifr.ch/metadata/iiif/sl-0002/manifest.json“，“位置”：“电子密码”}，
{“宣言”：http://www.e-codices.unifr.ch/metadata/iiif/bge-cl0015/manifest.json“，“位置”：“电子密码”}，
{“宣言”：https://data.ucd.ie/api/img/manifests/ucdlib:40851，“地点”：“都柏林大学学院”}，
{“宣言”：https://data.ucd.ie/api/img/manifests/ucdlib:30708，“地点”：“都柏林大学学院”}，
{“宣言”：http://media.nga.gov/public/manifests/nga_highlights.json，“地点”：“国家艺术馆”}，
{“宣言”：https://iiif.lib.harvard.edu/manifests/drs:48309543，“地点”：“哈佛大学”}，
{“宣言”：https://purl.stanford.edu/rd447dz7630/iiif/manifest.json，“地点”：“斯坦福大学”}，
{“宣言”：https://manifests.britishart.yale.edu/manifest/5005，“地点”：“耶鲁英国艺术中心”}，
{“宣言”：http://dams.llgc.org.uk/iiif/2.0/1465298/manifest.json，“地点”：“威尔士国家图书馆”}，
{“宣言”：http://localhost:8080/examples/Cambrian_1804-01-28.json，“位置”：“威尔士国家图书馆”}，
{“宣言”：http://localhost:3001/api/manifests/9b4569b0-25e8-463d-bc7c-7efbf8a76576，“地点：'公证档案馆'}
],
“windowObjects”：[]，
/**测试注释**/
注释端点：{
名称：“简单注释存储端点”，
模块：“SimpleSendPoint”，
选项：{
url:'注释'，
storeId:'比较'，
APIKey:“用户身份验证”
}
}
});
});
您正在将其设置为在
mirador.html
文件上没有滚动条

body { padding: 0; margin: 0; overflow: hidden;}
移除
溢出：隐藏

如果加载完整的HTML文件，则应在
iframe
中进行加载，而不是在
div
中进行加载。我正在尝试使用iframe，正如我读到的一样，但它很小……如何更改大小？这就是我所拥有的：我不确定这为什么会被否决，因为它通过显示哪个css规则删除滚动条来回答问题，页面应该加载到iframe中的事实，如问题评论中提到的@Adriano Repetti，与实际答案无关，这是什么？