如何$（“。class”）。load外部html div的一部分以及css / js

Question

我的主html中有一個div loadContent，可以通過外部html成功加載，而不是全部加載html，我決定只加載div的一部分，但是如果我只加載那一部分，它將無法與我的鏈接外部的CSS了。

我的外部HTML

<html>  
<head>                
    <!-- CSS
    ================================================== -->   
    <link rel="stylesheet" href="main.css"/>  

    <!-- JS
    ================================================== -->
    <script type="text/javascript" src="portfolioAjax.js"></script>
</head>

<body>    
    <!-- Primary Page Layout
    ================================================== -->
    <div id="content">
        <div class="sixteen full columns alpha omega">   
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="http://i.imgur.com/5bGrqhU.jpg" alt="logo" img-title="Dog So Cute" img-desc="A bunch of cute dog lol" author-name="Andrew" author-special="IAT" author-about="just a normal guy" author-skills="photoshop and stuffs" author-email="andrew@hotmail.com" author-web="yahoo.com.sg" author-img="images/andrew.jpg">
                <h2 class="caption">des<br />GAD Portfolio1</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic2.jpg" alt="logo" img-title="2 cute human" img-desc="err, 2 human." author-name="Daniel" author-special="IAT" author-about="mr simple" author-skills="know it all" author-email="daniel@hotmail.com" author-web="wikipedia.com" author-img="images/daniel.jpg">
                <h2 class="caption">bee<br />GAD Portfolio2</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic3.jpg" alt="logo" img-title="i am scared" img-desc="please don't bite me">
                <h2 class="caption">tee<br />GAD Portfolio3</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic4.jpg" alt="logo" img-title="look at my eyes" img-desc="i'm so cute">
                <h2 class="caption">fee<br />GAD Portfolio4</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic5.jpg" alt="logo" img-title="well..." img-desc="i don't know what is this">
                <h2 class="caption">foon<br />GAD Portfolio5</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic6.jpg" alt="logo" img-title="hi" img-desc="some candid shyt">
                <h2 class="caption">yea<br />GAD Portfolio6</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic7.jpg" alt="logo" img-title="Sup friend" img-desc="ok can">
                <h2 class="caption">ded<br />GAD Portfolio7</h2>
            </div>
            <div class="img_section four full columns alpha omega"> 
                <img class="four full columns test_img alpha omega" src="images/pic8.jpg" alt="logo" img-title="oh my god" img-desc="i forgot my clothes." author-name="Jassalyn" author-special="IAT" author-about="DUX Pro" author-skills="Everything" author-email="jess@hotmail.com" author-web="dux.com.sg" author-img="images/jessalyn.jpg">
                <h2 class="caption">bef<br />GAD Portfolio8</h2>    
            </div>
        </div>       
    </div>                      
</body>

如果我只是將上述文件作為一個整體加載，則可以，但是如果我僅加載#content，則.js和.css將消失。 有什么解決辦法嗎？

我的jQuery

$(function() {
    $("#tab_gad").click(function() {
        $('.loadContent').load('portfolio_gad.html #content'); // js and css file gone
        $('.loadContent').load('portfolio_gad.html'); // works fine since i import everything include heading
    });     
});

請告知您是否有更簡便的方法應采取的措施。

我要實現的摘要。 主html加載外部html的div（完整的js和css）

我的方法：我復制了主要的CSS和JS，讓我的外部html指向它，因為我的主要html和外部html幾乎相同，只是內容不同。 不確定我是否以正確的方式進行操作，請告知

Answer 1

這是因為您正在執行的代碼（在#content之后）只會加載ID設置為content的元素的HTML。

由於其他元素沒有該ID，因此在下載時將被忽略。 但是，您可以嘗試在不包含content元素的情況下加載整個HTML頁面。 必須下載腳本和樣式技術才能使它們起作用，但是該代碼永遠不會打擾下載任何腳本或CSS文件，因為您不需要它。 您只是要求它下載#content部分。

您可以通過某種方式將HTML更改為如下形式，

<!-- HTML -->
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="link/toStylesheet.css" />
  </head>
  <body>
    <div class="loadContent">
      <!-- leave it empty initially -->
    </div>
  </body>
  <script>
    // Place your scripts here -->
    // Load the content now -->
    $(document).ready(function () {
       $('.loadContent').load('portfolio_gad.html #content');
    });

  </script>
</html>

現在，當您下載HTML時，腳本和CSS將已經存在。 因此，您不必再面對這個問題。

Answer 2

您可以加載內容並使用回調函數來加載JS和CSS。 像這樣：

$(function() {

   function loadJS( scrpt, fn ) {
    var el = document.createElement('script'),
    body = document.body;

    el.type = 'text/javascript';
    el.src = scrpt;
    if ( typeof fn === 'function' ) {
      el.onload = fn();
    }
    body.appendChild(el);
  }

  function loadCSS( scrpt, fn ) {
    var el = document.createElement('link'),
    body = document.head;
    el.type = 'text/css';
    el.media = 'all';
    el.rel = 'stylesheet';
    el.href = scrpt;
    if ( typeof fn === 'function' ) {
      el.onload = fn();
    }
    body.appendChild(el);
  }

  $("#tab_gad").click(function() {
    $('.loadContent').load('portfolio_gad.html #content', function() {
      loadJS('/path/to/whatever.js');
      loadCSS('/path/to/whatever.css');
    });
  });     
});

如何$（“。class”）。load外部html div的一部分以及css / js

問題描述

2 個解決方案

解決方案1
0 2014-11-10 15:27:42

解決方案2
0 已采納 2014-11-10 15:33:12

如何$（“。class”）。load外部html div的一部分以及css / js

問題描述

2 個解決方案

解決方案1 0 2014-11-10 15:27:42

解決方案2 0 已采納 2014-11-10 15:33:12

解決方案1
0 2014-11-10 15:27:42

解決方案2
0 已采納 2014-11-10 15:33:12