javascript - 如何避免这种内联 Javascript？

Question

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

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

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

感谢您通常的帮助。

score 5 · Accepted Answer

使用属性：

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

然后你可以写

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

score 1 · Accepted Answer

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

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

</script>

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

score 0 · Accepted Answer

我建议使用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);
});

javascript - 如何避免这种内联 Javascript？

3 回答 3

Related

Reference