javascript
  • html
  • css
  • responsive-nav
  • 2016-07-26 141 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

    相關問題