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

    既存のHTMLファイルを別のHTMLファイルにロードしようとすると問題が発生します。私は私のHTMLコード内でこののfuctionとJavaScriptでそれをやっているHTML/CSS/JavaScript別のhtmlページの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」それはページのフル 内容を見ることができるようにするために、スクロールバーとボックスに型のものをロードします(発見したとしてもスクロールバーは「index.htmlの」

    enter image description here

    )ロードされたページ内のコンテンツに応じて、垂直または水平にすることができ、それは「style.csですs」のファイル:

    /* 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)この問題は、あなたのURLのスペースが原因である可能性があります。あなたが消えて、単純にスクロールバーが希望の場合それはあなたのポップアップにスタイルoverflow: hiddenを追加し、(2)encodeURI(src)またはsrc.replace(/ /g, '%20') CSS and JQuery: spaces inside image name break code of url()

    を使用してエスケープする必要があります。ただし、コンテンツが箱から流出しても、それは表示されず/回収可能ではないことに注意してください。

    +0

    があればさらに助けてくれる方が簡単でしょう2)ええ、申し訳ありませんが、十分にクリアされていなければ、私はちょうどhome.htmlを直接開く必要がありますので、空白の有無にかかわらず、結果は同じです – ehem

    +0

    私はあなたがあなたのURLに間違ったスラッシュを使用しているかもしれないと信じています。 try '/ home.html' – Hodrobond

    +0

    ページの読み込みに関しては、あなたがしていることを誤解していると思います。 'document.getElementById(" content ")。innerHTML ='は要素の内容をid "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

    関連する問題