如何$（“。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