繁体   English   中英

HTML / CSS / JavaScript HTML页面出现在另一个html页面滚动条问题中

[英]HTML/CSS/JavaScript Html page in another html page scrollbars issue

尝试将另一个HTML文件加载到现有HTML文件时遇到问题。 我在我的html代码中使用此功能的JavaScript

<script>
        function load_home(){
                document.getElementById("content").innerHTML='<object type="type/html" data="New folder\home.html" ></object>';
        }
    </script>

问题1: 如果我将其移至同一文件夹并将其更改为data="home.html"则该代码在文件夹中找不到“ home.html”,它应能正常工作。 可以解决吗?

Q2:即使代码找到了我的“ home.html”, 也会加载到 带有滚动条 的盒式东西中,以便能够看到页面的全部内容(滚动条可以是垂直的也可以是水平的,具体取决于里面的内容加载的页面)

在此处输入图片说明

“ index.html”及其“ style.css”文件:

 /* Font to left and change text type*/ body{ margin : 0; padding : 0; font-family : 'Arial',serif; min-width:1200px; } a{ text-decoration : none; } /*NAV CLASS */ #menu >.nav { background-color : #87CEEB; color: white; list-style : none; padding : 4px 0 12px 0; margin : 0px; } /*CONTENTS RIGHT*/ .nav > .nav-contects{ text-align : right; } #menu >.nav > .nav-contects > li { display : inline-block; padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */ font-size: 16px; margin : 0; position : relative; bottom : 10px; /*align width center */ } /*a tag inside a li tag inside a .nav class*/ #menu >.nav > .nav-contects > li > a { color: #f79963; } /* a tag inside a li tag inside a .nav class while mouse hovering */ #menu > .nav > .nav-contects > li > a:hover { color : #ffffff; padding : 0 0 0 0 ; /*margin : 0px; background-color : #888888;*/ } 
 <DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> my title </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body onload="load_home()"> <nav id="menu"> <ul class="nav"> <div class="nav-contects"> <li><a href="#Home" onclick="load_home">Home</a></li> </div> </ul> </nav> <div id="content" align = "center"> </div> <script> function load_home(){ document.getElementById("content").innerHTML='<object type="type/html" data="New folder\\home.html" ></object>'; } </script> <div class="footer" align = "center"> <p align = "center"> <i>an awesome business</i> </p> </div> </body> </html> 

“ home.html”文件

<DOCTYPE html>
<html lang="en">

<body>
        Some random long text
        dasfda gsdwgdsgd
        sgsdgsdgdsf sadddad     asddddddddddddddddddddddddddddddddddddddddddddddd
</body>

</html>

PS:这可能全错了,也许我正在尝试使用错误的方式来做所有事情

PSS:这不是我文档的完整代码,我删除了很多代码以确保其中没有错误, 包括样式和其他错误。

EDIT#1:我希望“受限”框消失并像直接从计算机上打开“ home.html”一样打开它。


我非常感谢您可以提供的任何帮助。

(1)此问题可能是由您的网址中的空格引起的。 应该使用encodeURI(src)src.replace(/ /g, '%20') CSS和JQuery对其进行转义:图像名称中的空格会破坏url()的代码

(2)如果您只是希望滚动条消失,请在弹出式窗口中添加样式overflow: hidden 但是请注意,如果有任何内容从包装箱中泄漏出来,将不会被看见/抢救。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM