读取 WordPress PHP 中已排队的 JS 文件中的 JavaScript 变量。

huangapple go评论58阅读模式
英文:

reading javascript variables within enqueued JS files in wordpress php

问题

I have main.js file which is like this. I would like to read departDateOneWay in sample.js.

In sample.js file, which is called in an onclick event, I am expecting to see the testVar but I am not sure if that is the correct way as I get testVar is not defined.

I am enqueuing both sample.js and main.js like this in functions.php.

I also tried wrapping the whole main.js file in PHP this way so I could read departDateOneWay in sample.js, but as soon as I enqueue the newly created main.php (from main.js) instead of main.js, the site does not load.

Basically, I would like to read JavaScript variables from one JS file to another where all JS files are enqueued using wp_enqueue_scripts. Can someone please help?

英文:

I have main.js file which is like this. I would like to read departDateOneWay in sample.js

(function ($) {
    "use strict";
    var $window = $(window);

    $window.on('load', function () {
        var $document = $(document);
     ...
     ...

          function(start, end) {
       
          departDateOneWay = start.format('YYYY/MM/DD');
          console.log("onewaydepart:::"+departDateOneWay);
          var testVar ='<?php echo $departDateOneWay;?>';
       }
       
     ...
     ...

    });

})(jQuery);

In sample.js file , which is called in an onclick event, I am expecting to see the testVar but I am not sure if that is the correct way as I get testVar is not defined

function test(){
	console.log("departdate:"+testVar);
}

I am enqueuing both sample.js and main.js like this in functions.php

function travel_register_scripts() {
wp_enqueue_script('main', get_template_directory_uri().'/assets/js/main.js', array(), '1.0', false);
   wp_enqueue_script('sample', get_template_directory_uri().'/assets/js/sample.js', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'travel_register_scripts');    

I also tried wrapping the whole main.js file in php this way so I could read departDateOneWay in sample.js

<?php
function ti_custom_javascript() {
?>
<script type='text/javascript>
(function ($) {
"use strict";
var $window = $(window);
...
function(start, end) {
departDateOneWay = start.format('YYYY/MM/DD');
console.log("onewaydepart:::"+departDateOneWay);
var testVar ='<?php echo $departDateOneWay; ?>';
}
...
</script>
<?php
}

add_action(&#39;wp_head&#39;, &#39;ti_custom_javascript&#39;);
?&gt;

but as soon as I enqueue the newly created main.php (from main.js) instead of main.js , site does not load

Basically I would like to read javascript variables from one JS file to another where all JS files are enqueued using wp_enqueue_scripts . Can someone please help

答案1

得分: 1

问题出在 departDateOneWay 变量的范围上:它是局限于 window.load 的回调函数内部。

main.js 中,将 departDateOneWay 的值设置为 window 对象的属性,然后在 sample.js 中通过 window.departDateOneWay 访问。

main.js

(function ($) {
    "use strict";
    var $window = $(window);

    $window.on('load', function () {
        var $document = $(document);
     ...
     ...

          function(start, end) {
       
          window.departDateOneWay = start.format('YYYY/MM/DD');
          console.log("onewaydepart:::"+window.departDateOneWay);
       }
       
     ...
     ...

    });

})(jQuery);

sample.js

function test(){
    console.log("departdate:"+window.departDateOneWay);
}
英文:

The issue is the scope of the departDateOneWay variable: it's localized to the callback function for window.load.

In main.js, set the departDateOneWay value as a property on the window object, and then access in sample.js by doing window.departDateOneWay.

main.js

(function ($) {
    &quot;use strict&quot;;
    var $window = $(window);

    $window.on(&#39;load&#39;, function () {
        var $document = $(document);
     ...
     ...

          function(start, end) {
       
          window.departDateOneWay = start.format(&#39;YYYY/MM/DD&#39;);
          console.log(&quot;onewaydepart:::&quot;+window.departDateOneWay);
       }
       
     ...
     ...

    });

})(jQuery);

sample.js

function test(){
    console.log(&quot;departdate:&quot;+window.departDateOneWay);
}

huangapple
  • 本文由 发表于 2023年6月8日 04:53:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/76427050.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定