最受欢迎

AJAX 完成后，加载 <script> 标签，但仅加载具有特定 ID 的标签

after ajax complete, load <script> tags but only ones with specific id's

本文关键字：标签 加载 ID script AJAX | 更新日期: 2023-09-27

我目前正在使用无限滚动来加载更多内容，内容有<script>需要运行的标签。 所以我使用以下代码作为ajax-callback：

加载 ajax 回调时的 JS：

function ajaxLoadedCallback() {
      // contentElem is the HTML element you've loaded via ajax
      scriptx = document.getElementsByTagName("script");
      // Load scripts into new array because 
      // scriptx seems to change as scripts execute, at least in some browsers
    scripts = new Array();
    for (var idx=0; idx<scriptx.length; idx++) {
        if (jQuery(scriptx[idx]).is("#inline-comments")) {
                scripts[idx] = scriptx[idx].text;
        }
    }
        console.log (scripts[idx]);
      // execute each script in turn
      for(idx=0; idx<scripts.length; ++idx) {
         if (scripts[idx].length!=0) {
            try {
              // create a function for the script & execute it
              f = new Function(scripts[idx]);
              f();
            } catch(se) {
            } // end try-catch
         } // end if
      } // end for
}

每个内容帖子都有我要加载的脚本标签：

<script id="inline-comments" >
    console.log ('<?php echo $post->ID; ?>' + 'has loaded...');
    var tid_<?php echo $post->ID; ?> = setInterval( function () {
    if ( document.readyState !== 'complete' ) return;
        clearInterval( tid_<?php echo $post->ID; ?> );       
        inline_comments_ajax_load(<?php echo $post->ID; ?>)
    }, 100 );   
</script>

获取未捕获的类型错误：无法读取此行上未定义错误的属性"长度"if (scripts[idx].length!=0) {

ajax 回调在正确的时间加载，但中断，因为我认为scripts[idx]是空的。 但为什么呢？ 当我使用console.log()时，它会显示scriptx[idx]何时具有 id 和 id 的名称。

更新谢谢PSL！ console.log显示它正在查找脚本，但 scripts.length 返回零

function ajaxLoadedCallback() {
    scriptx = document.getElementsByTagName("script");

    scripts = new Array();
    for (var idx=0; idx<scriptx.length; idx++) {
        if (jQuery(scriptx[idx]).is(".inline-comments-script")) {
            console.log (".inline-comments-scriptfound!");
            console.log ("####### .text #######");
            console.log (scriptx[idx].text);
            console.log ("####### .innerHTML ######");
            console.log (scriptx[idx].innerHTML);
            scripts.push = scriptx[idx].innerHTML;
        }
    }
    console.log ("####### END ######");
    console.log ("Found "+scripts.length+ " script(s)");
      // execute each script in turn
      for(idx=0; idx<scripts.length; ++idx) {
        var content = scripts[idx];
            if (content.length) {
                try {
              // create a function for the script & execute it
              f = new Function(content);
              f();
            } catch(se) {
            } // end try-catch
         } // end if
      } // end for
}

现在工作！请参阅下面的PSL答案 - 如果您有wordpress，您也可以实时观看：https://github.com/MattMcFarland/inline-ajax-comments - 效果很好！

你在这里有几个问题。

for (var idx=0; idx<scriptx.length; idx++) {
        if (jQuery(scriptx[idx]).is("#inline-comments")) {
                scripts[idx] = scriptx[idx].text;
        }
    }
您

正在递增循环迭代变量，即使没有匹配项并且您不想将任何项目推送到数组。因此，如果第一个脚本与您的条件不匹配scripts[0]则将未定义，因此当您 tru 访问条件中未定义的属性length时会出现错误if (scripts[idx].length!=0) {

另一个问题是，这里的scriptx[idx].text文本是一个函数，所以你想要元素的真实文本而不是函数引用，所以你应该写jQuery(scriptx[idx]).text()或scriptx[idx].innerHTML。由于您使用的是id，并且id不应该重复，因此您可以简单地将其编写为：

     var txt = jQuery('#inline-comments').text();
     if (txt.length) {
        try {
          // create a function for the script & execute it
          f = new Function(scripts[idx]);
          f();
        } catch(se) {
        } // end try-catch
     } // end if

如果您打算从 id inline-comments转换为类，并且您希望访问其中的多个，那么这应该可以工作。

 scripts = [];
    for (var idx=0; idx<scriptx.length; idx++) {
        if (jQuery(scriptx[idx]).is(".inline-comments")) {
                scripts.push(scriptx[idx].innerHTML);
        }
     }
     // execute each script in turn
      for(idx=0; idx<scripts.length; ++idx) {
          var content = scripts[idx];
         if (content.length) {
            try {
              // create a function for the script & execute it
              f = new Function(content);
              f();
            } catch(se) {
            } // end try-catch
         } // end if
      } // end for
相关文章：