Question

我正在使用ajax调用将mycontent.php加载到我的模态对话框中。我正在使用AJAX，但是当它在模态窗口中时，3个javascript标记未被包含在mycontent.php中或正在执行。

我已经尝试过eval语句，但似乎没有用。

这是我的代码：

main.html中

 <a class="dialog" title="testvideo" href="mycontent.php">
 <img class="imageleft" width="200" height="150" src="assets/images/photos/deya/thumbnail.jpg"></a>

modal.js

    $(document).ready(function() {                

       $('a.dialog').click(function (event) {
          if ($("body").hasClass("res-full")){
             event.preventDefault();
             $this = $(this);

             var URL     = $(this).attr('href');
             var dialogbox = document.getElementById('dialog');
             var dialogOptions = {
                        height: 'auto',
                        width: 'auto',
                        modal: true,

              //         open: function(event, ui){

              //         },

                       close: function(event, ui){
                            $('#dialog').empty(); 
                       }
          };

       if(dialogbox==null) {
          $this.after("<div id=\"dialog\"></div>");
       }

       jQuery('#dialog').load(URL + " #content", function() {eval($('script').html())}).dialog(dialogOptions);


      }            
      });


    });

mycontent.php

   <div id="content">
       <div id="VidPlayerPlaceholder_7001_wrapper">
        <object id="VidPlayerPlaceholder_7001" width="100%" height="100%" type="application/x-shockwave-flash" data="video/player/player6.swf" bgcolor="#000000" name="VidPlayerPlaceholder_7001" tabindex="0">
        <div id="VidPlayerPlaceholder_7001_jwpsrv" style="position: absolute; top: 0px; z-index: 10;"></div>
   </div>
   <script type="text/javascript" src="http://www.mycompany.com/video/player/js/jwplayerv6.js"></script>
   <script type="text/javascript">jwplayer.key="jCz8k6TcT9i6M5vRXEI474+6dfNf9a7gHBbRfA==";</script>
   <script type="text/javascript">
          jwplayer('VidPlayerPlaceholder_4029').setup({ 
                    flashplayer: "http://www.company.com/video/player/player6.swf",
                    html5player: "http://www.company.com/video/player/js/jwplayer.html5.js",
                    playlist: [
            { image: "http://pciture.jpg", file: "rtmp://DEYA/video3.m4v"}
        ],
        width: '505',
        height: '430',
        stretch: 'uniform',
        autostart: 'false',
        repeat: 'false',

        logo: {
            file: 'http://ccopyright.png',
            link: 'http://www.mycompany.ca',
            hide: '',
            position: 'top-left'
        },
        rtmp: {
            bufferlength: '5'
        },
        primary: 'html5'
        });
        jwplayer('VidPlayerPlaceholder_4029').setVolume(50);
        if(0 > 0){
            jwplayer('VidPlayerPlaceholder_4029').stop();       
            jwplayer('VidPlayerPlaceholder_4029').seek(0);      
            if('false' == 'false'){
                jwplayer('VidPlayerPlaceholder_4029').pause();
            }
    }
</script>

如果有人可以提供帮助，那将不胜感激。

Answer 1

您正在使用load致电URL + " #content"。在URL之后添加选择器使jQuery仅使用页面的那一部分而忽略其余部分。因此，您的<script>标记永远不会加载到DOM中，也不会在回调中可用。

尝试使用$.get获取整个页面，然后将每个部分放在它所属的位置。

$.get(url, function(html){
    // Parse HTML response
    var $data = $(html);

    // Add content to DOM
    $('#dialog').html($data.filter('#content').html());

    // Run scripts
    $data.filter('script').each(function(){
        // http://stackoverflow.com/a/12201713/206403
        var scriptTag = document.createElement('script');
        scriptTag.text = $(this).html();
        document.body.appendChild(scriptTag);
    });

   // Open dialog
   $('#dialog').dialog(dialogOptions);

}, 'html');

Answer 2

正如我在评论中提到的那样，你可以尝试这样做，我只是建立在Rocket Hazmat的答案上 - 但是用#fragmentdiv参数替换了jquery用于其load（）的实现的片段div。

现在您还要做的是在成功函数（done（））中调用您的jwplayer，将您的php文件中的jwplayer安装程序（内联JS）粘贴到done（）中功能如下所述 - 并查看是否有效。

(function($) { //wrap to local scope
    $(document).ready(function() {
        var fragment_div = '#content';
        var $target_div = '#dialog';

        $.ajax({
            url: url,
            dataType: 'html' //IE can be buggy on the jquery intelligent guess
        }).done(function(data) {
            var content = $('<div>').append($.parseHTML(data)).find(fragment_div);
            $('#dialog').html(content);

            //try
            $target_div.html($data.filter('script'));
            //or
            $target_div.html($('<script>').append($.parseHTML(data)).find('script');

           //try moving your jwplayer setup code here for testing, you can use bind() and trigger()
           //to create a custom event if you want to keep the js as you have it now in mycontent.php
           jwplayer('VidPlayerPlaceholder_4029').setup({ /*..etc */ });

           // Open dialog
           $('#dialog').dialog(dialogOptions);
        });
    });
})(jQuery);

编辑 .php中是否还有其他内容？如果没有，你可以在没有#fragment参数的情况下使用.load（）。这将加载javascript以及。

Answer 3

在函数中放置mycontent.php上的javascript，然后在.load（）完成时可以从main.html调用该函数。在http://api.jquery.com/load/

上阅读有关.load（）的onComplete功能的更多信息

AJAX完成后运行javascript

3 个答案: