Question

我有一个带有空div的html文件（index.html），它使用ajax从另一个html文件（second.html）加载其内容。

我使用jqueryui 加载包含音频播放器的弹出窗口，点击index.html上的按钮。

当我在index.html上完成所有编码时，如下所示，它工作正常，并在按钮点击时在弹出窗口中显示音频播放器。 - jsfiddle here

<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>

然而，当我将内容加载到＆＃34; stuff＆＃34;从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＆＃39;的div（或其他元素）。壬烯＆＃39;在index.html中。你也不需要重复“东西”的定义。 div在second.html中。

所以我会删除second.html的第一行和最后一行，并将onreadystatechange函数更改为包含

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

或者，由于您已经使用了jQuery，我建议您使用built-in AJAX routines。此外，根据你想要的效果，我怀疑你应该在之后调用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 个答案: