如何从 javascript 打印 wordpress 简码

Question

我在从 javascript 打印 wordpress php 短代码时遇到了一点问题。

这里有一些代码：

JS

    <script>
    function hashHandler(){
        this.oldHash = window.location.hash;
        this.Check;

        var that = this;
        var detect = function(){
            if(that.oldHash!=window.location.hash){
                console.debug("HASH CHANGED - new has" + window.location.hash);
                that.oldHash = window.location.hash;
                if (window.location.hash == "#summary"){
                    console.debug ("true for summary");
                    $(".HG-system-builder-contact-form-container").html('<?php echo do_shortcode('[contact-form-7 id="5514" title="DYS summary page"]'); ?>');
                } else {
                    console.debug("false for summary")
                }
            }
        };
        this.Check = setInterval(function(){ detect() }, 100);

    }

    var hashDetection = new hashHandler();
</script>

此脚本检查我的网址中的哈希是否为#summary，如果是，则应添加此 php 短代码。

php 短代码的结果是使用 contact form 7（wordpress 插件）生成的联系表单，但不幸的是它有一些错误。

以下是 chrome 检查器的结果：

    <script>
        function hashHandler(){
            this.oldHash = window.location.hash;
            this.Check;

            var that = this;
            var detect = function(){
                if(that.oldHash!=window.location.hash){
                    console.debug("HASH CHANGED - new has" + window.location.hash);
                    that.oldHash = window.location.hash;
                    if (window.location.hash == "#summary"){
                        console.debug ("true for summary");
                        $(".HG-system-builder-contact-form-container").html('<div role="form" class="wpcf7" id="wpcf7-f5514-p986-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form name="" action="/create-your-system/#wpcf7-f5514-p986-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="5514" />
<input type="hidden" name="_wpcf7_version" value="4.2" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f5514-p986-o1" />
<input type="hidden" name="_wpnonce" value="ff2e2b253a" />
</div>
<p>Your Name (required)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </p>
<p>Your Email (required)<br />
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </p>
<p>Subject<br />
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </p>
<p>Your Message<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>');
                    } else {
                        console.debug("false for summary")
                    }
                }
            };
            this.Check = setInterval(function(){ detect() }, 100);

        }

        var hashDetection = new hashHandler();
    </script>
    <div class="HG-system-builder-contact-form-container"></div>


                </div>
            </div>

如您所见，问题在于生成的 html 继续换行，打破代码并显示此错误

Uncaught SyntaxError: Unexpected token ILLEGAL

关于如何解决这个问题的任何想法？

谢谢

编辑

$(".HG-system-builder-contact-form-container").html('<div role="form" class="wpcf7" id="wpcf7-f5514-p986-o1" lang="en-US" dir="ltr"><div class="screen-reader-response"></div><form name="" action="/create-your-system/#wpcf7-f5514-p986-o1" method="post" class="wpcf7-form" novalidate="novalidate"><div style="display: none;"><input type="hidden" name="_wpcf7" value="5514" /><input type="hidden" name="_wpcf7_version" value="4.2" /><input type="hidden" name="_wpcf7_locale" value="en_US" /><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f5514-p986-o1" /><input type="hidden" name="_wpnonce" value="ff2e2b253a" /></div><p>Your Name (required)<br />    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </p><p>Your Email (required)<br />    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </p><p>Subject<br />    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </p><p>Your Message<br />    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </p><p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p><div class="wpcf7-response-output wpcf7-display-none"></div></form></div>');

但在 html 源代码中：

<div class="HG-system-builder-contact-form-container"></div>

Answer 1

这是因为当您退出短代码时，javascript 不能在多行上接受字符串。在你回显之前，看看去掉 echo Strip new lines in PHP 中的新行

像这样：

$(".HG-system-builder-contact-form-container").html('<?php echo str_replace(array("\r", "\n"), '', do_shortcode('[contact-form-7 id="5514" title="DYS summary page"]')); ?>');

Answer 2

有一个简单的解决方法——使用 base64 编码：

$b = base64_encode(do_shortcode('[contact-form-7 id="5514" title="DYS summary page"]'));
$(".HG-system-builder-contact-form-container").html(atob('<?php echo $b; ?>'));