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

Question

我在尝试将另一个 HTML 文件加载到现有文件时遇到问题。我在我的 html 代码

中使用 JavaScript 执行此操作

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

Q1: This code does not find the "home.html" when it is in the folder if I move it to the same folder and change it to data="home.html" it works as it should . Can it be solved ?

Q2: Even when the code finds my "home.html" it loads in a box-type thing with scroll bars , to be able to see the full content of the page ( the scroll bars can be vertical or horizontal depending on the content inside the loaded page )

"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: 我希望 "restricted" 框消失并打开 "home.html" 就像我直接从我的电脑打开它一样”

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

Answer 1

(1) 此问题可能是由您的 url 中的 space 引起的。应该使用 encodeURI(src) 或 src.replace(/ /g, '%20') 进行转义 CSS and JQuery: spaces inside image name break code of url()

(2) 如果您只想让滚动条消失，请将样式 overflow: hidden 添加到您的弹出窗口。但是请注意，如果任何内容从盒子中溢出，它不会是 visible/salvageable.

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

HTML/CSS/JavaScript Html page in another html page scrollbars issue

html

javascript

css

responsive-nav