javascript
  • html
  • css
  • responsive-nav
  • 2016-07-26 131 views 0 likes 
    0

    当我尝试将另一个HTML文件加载到现有的HTML文件时,出现问题。我做的是使用JavaScript与此机能的研究我的HTML代码中另一个HTML页面中的HTML/CSS/JavaScript Html页面滚动条问题

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

    Q1:此代码不会找到“/home.html”的,当它是文件夹中,如果我将它移动到相同的文件夹并将其更改为 data="home.html"它可以正常工作。它能解决吗?

    Q2:即使代码发现我的“/home.html”的它加载在一个盒子型件事带有滚动条,要能够看到完整 内容页面(在滚动条可以垂直或水平取决于加载页面中的内容)

    enter image description here

    的“的index.html”和它的“style.cs的”文件:

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

    的 “/home.html” 的文件

    <DOCTYPE html> 
    <html lang="en"> 
    
    <body> 
         Some random long text 
         dasfda gsdwgdsgd 
         sgsdgsdgdsf sadddad  asddddddddddddddddddddddddddddddddddddddddddddddd 
    </body> 
    
    </html> 
    

    PS:这可能是完全错误的,也许我试图用错误的方式

    做的一切

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

    编辑#1:我要“限制”框消失,打开“/home.html”的喜欢它应该,如果我打开它从我的电脑直接”


    我非常感谢所有帮你提供。

    +0

    使用相对路径和iframe代替对象 – dandavis

    +0

    'data =“新建文件夹\ home.html”' - 尝试使用_proper_路径 - 不使用(未编码)空白区和正斜杠。 – CBroe

    +0

    您能否澄清一下(2)?你是否试图简单地防止滚动条出现,如果弹出窗口根据内容动态调整大小,弹出窗口后面的预期规则是什么? – Hodrobond

    回答

    0

    (1)此问题可能是由您的网址空间引起的。应该使用encodeURI(src)src.replace(/ /g, '%20') CSS and JQuery: spaces inside image name break code of url()

    (2)如果你只是想滚动条消失,风格overflow: hidden添加到您的弹出转义。不过要注意的是,如果任何内容溢出盒子,它将不可见/可挽救。

    +0

    2)是的,如果我还没有足够清楚,我会希望它填充页面因为它应该如果我直接打开home.html 1)有和没有空格的结果是相同的 – ehem

    +0

    我相信你可能另外在你的url中使用了错误的斜杠。 尝试'/ home.html' – Hodrobond

    +0

    至于页面加载,我相信你误解你在做什么。 'document.getElementById(“content”)。innerHTML ='正在用元素“content”替换元素的内容。如果你想重定向页面,我会说'尝试'window.location.href =“http://stackoverflow.com”;'或'window.location.replace(“http://stackoverflow.com” );'(http://stackoverflow.com/questions/503093/how-to-redirect-to-another-page-in-jquery) 道歉,它听起来像你试图打开新页面的弹出窗口。 – Hodrobond

    相关问题