如何避免这种内联 Javascript？答案

【问题标题】：How can I avoid this inline Javascript?如何避免这种内联 Javascript？
【发布时间】：2013-04-20 21:43:42
【问题描述】：

我有一个 wordpress 网站。在single.php下，我有以下body标签

  <body <?php body_class(); ?>  onLoad="func(<?php echo $thePostID?>);" >

阅读网络上的文章使我确信避免使用内联 CSS 和内联 javascipt。所以我对我的网站进行了重组，以便现在将样式和脚本包含在外部文件中。除了这行代码，因为它确实需要the post id，我不知道如何在single.php 之外检索它。

感谢您平时的帮助。

【问题讨论】：

标签： javascript jquery wordpress inline-code reflow

【解决方案1】：

我建议使用wp_localize_script

function theme_localize_post_id(){
   global $post;
    wp_register_script( 'your_script',... );
    wp_localize_script( 'your_script', 'the_name_for_your_js_object' , array( 'post_id'=>$post->ID ) );
}

add_action( 'wp', 'theme_localize_post_id' );

然后在你的脚本中简单使用。

$(document).ready(function(){
  functionName(post_id);
});

【讨论】：

【解决方案2】：

只需在脚本中调用它，或者 document.onload...

<script>
 $(document).ready(function(){
 (function(){
    <?php echo $thePostID?; ?>
 })();
 });

</script>

在脚本标签中编写 javascript 是完全可以接受的。即使它不在外部文件中，它也在您的 html 之外。

【讨论】：

感谢 nick 的帮助，不胜感激
在回调函数中立即调用函数表达式？
@Rick true 没有必要，但在 onload 中将其与其他内容分开。
我在 2 年后回到这里来记录 Rick Viscomi 的评论。对于阅读的人来说，这是可行的，但没有遵循最佳实践：在 jQuery dom 就绪回调中使用命名函数，并且不要将 php 与标记和/或 javascript 混合。 Slaks 的答案是最正确的一个

【解决方案3】：

使用属性：

<body data-post-id="<?php echo $thePostID?>">

然后你就可以写了

var postId = document.body.getAttribute('data-post-id');

【讨论】：

因为在 WP 中通常有 jQuery，你也可以使用 var postID = $(body).attr('data-post-id');
是的@Paolo Casciello，我完全同意你的看法。再次感谢。
@PaoloCasciello: $(body).data('post-id')