如何從ajax加載的html文件中加載jscript？

Question

我有一個帶有空div的html文件（index.html），它使用ajax從另一個html文件（second.html）加載其內容。

我正在使用jqueryui加載一個包含音頻播放器的彈出窗口，用於單擊index.html的按鈕。

當我在index.html上進行如下所示的所有編碼時，它可以正常工作並在單擊按鈕時在彈出窗口中顯示音頻播放器。 -jsfiddle這里

<html>
<head>
  <script type="text/javascript">
       $(function audioplay() {
    $( "#audio" ).dialog({
      autoOpen: false,
        modal: true,
        height: 100,
        width: 335,
      show: {
        effect: "blind",
        duration: 300
      },
      hide: {
        effect: "blind",
        duration: 300
      }
    });

    $( "#opener" ).click(function() {
      $( "#audio" ).dialog( "open" );
    });
  });
  </script>
</head>
<body>
<div id="stuff">
     <div id="audio" title="Places Are Connected">
         <audio controls autoplay>
           <source src="media/1.mp3" type="audio/mpeg">
           Your browser does not support this audio format.
         </audio>
     </div>
<button id="opener">Open Popup</button>
</div>
</body>
</html>

但是，當我從second.html文件中的“內容”中加載內容時，它無法正常工作。 例如：

的index.html

<body onload="loadXMLDoc()">
 <div id="stuff">
   <!--content from second.html loads here-->
 </div>
</body>

<script>
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("stuff").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","second.html",true);
xmlhttp.send();
}

second.html

<div id="stuff">
 <div id="audio" title="Places Are Connected">
     <audio controls>
       <source src="http://www.hipstrumentals.com/wp-content/uploads/2014/02/Katy-Perry-Ft.-Juicy-J-Dark-Horse-Instrumental-Prod.-By-Dr.-Luke-Max-Martin-Cirkut.mp3" type="audio/mpeg">
       Your browser does not support this audio format.
     </audio>
 </div>
<button id="opener">Open Popup</button>
</div>

.JS文件

$(function() {
$( "#audio" ).dialog({
  autoOpen: false,
    modal: true,
    height: 100,
    width: 335,
  show: {
    effect: "blind",
    duration: 300
  },
  hide: {
    effect: "blind",
    duration: 300
  }
});

$( "#opener" ).click(function() {
  $( "#audio" ).dialog( "open" );
});
});

當像上面的示例一樣使用它時，音頻播放器僅顯示在索引頁面本身上。 該按鈕將顯示在播放器下方，並且不執行任何操作。

我嘗試了很多方法來嘗試用ajax加載JS，但到目前為止沒有任何效果。 而且由於我對JS和Ajax都不熟悉，所以我懷疑可能缺少一個簡單的修復程序。 因此，對於使其正常工作的任何幫助將不勝感激。

Answer 1

我不清楚您通過AJAX加載JavaScript的含義，因為您要加載的代碼不包含任何JS。 但是，關於為什么音頻播放器未按預期顯示的情況，看來問題的第一部分是您沒有索引ID為“ nonen”的div（或其他元素）。 HTML。 您也不需要在second.html中重復'stuff'div的定義。

因此，我將刪除second.html的第一行和最后一行，並將您的onreadystatechange函數更改為包括

document.getElementById("stuff").innerHTML=xmlhttp.responseText;

另外，由於您已經在使用jQuery，因此建議您使用內置的AJAX例程。 此外，這取決於你想要的效果，我懷疑你應該調用jQuery UI的對話框常規您添加了第二個div（或每時間后你加載它，如果它再后來改變）之后。

例如，您的當前腳本可以替換為以下（未調試）代碼。 首先，您要確保在AJAX調用完成之后可以在以后的時間調用audioPlay() ，並且還要確保它不會在頁面加載后立即執行，甚至在第一個調用完成之前也不執行。

audioPlay = function () { // Define a function to be called multiple times later
  $('#audio').dialog({
    ... // Fill in your options
  });
  $('#opener').click(function () {
    $('#audio').dialog('open');
  });
};

接下來，一旦將加載的HTML插入到DOM中，您希望loadXMLDoc()函數調用audioPlay() 。

loadXMLDoc = function () {
  $('#audio').dialog('destroy'); // Get rid of any existing dialog
  $.ajax({
    dataType: 'html', // Load some HTML data via AJAX
    url: 'second.html', // From this file (relative URL)
    success: function (data) { // When the HTML has finished being downloaded...
      $('#stuff').innerHTML(data); // ...add it to the div with ID "stuff"
      audioPlay(); // ...and create a dialog for the new div
    }
  });
};

Answer 2

好的，已經解決了。 如我所料，這是一個簡單的修復。 只需要做一個runPopupJs（）函數，然后在onload調用它即可。

function runPopupJs() {
 var head = document.getElementsByTagName('head')[0];
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'js/popup.js';
 head.appendChild(script);
}

稱為-

<body onload="loadXMLDoc();runPopupJs()">

如何從ajax加載的html文件中加載jscript？

問題描述

2 個解決方案

解決方案1
1 2014-04-21 21:14:30

解決方案2
0 已采納 2014-04-22 10:58:21

如何從ajax加載的html文件中加載jscript？

問題描述

2 個解決方案

解決方案1 1 2014-04-21 21:14:30

解決方案2 0 已采納 2014-04-22 10:58:21

解決方案1
1 2014-04-21 21:14:30

解決方案2
0 已采納 2014-04-22 10:58:21