如何使用 javascript 在 wp 中执行现有的简码

Question

我正在使用PDF Embedder将 pdf 嵌入到 wp 网页中。

我希望它在单击按钮时嵌入 pdf 。

当我添加 pdf 媒体 PDF 嵌入器在后端编辑器中插入短代码时：

 [pdf-embedder url="http://example.com/wp-content/uploads/securepdfs/2019/11/nameofpdf.pdf"]

我创建了一个 js 按钮 onlick function 来执行这个简码

 <script> function EmbedPDF(){ [pdf-embedder url="http://example.com/wp-content/uploads/securepdfs/2019/11/nameofpdf.pdf"]; } </script>

但是，当单击按钮时，我在控制台上收到错误：

未捕获的语法错误：意外的标记“<”

 <a href="/?pdfemb-serveurl=http%3A%2F%2Fexample.com%2Fwp-content%2Fuploads%2Fsecurepdfs%2F2019%2F11%2Fnameofpdf.pdf" class="pdfemb-viewer" style="" data-width="max" data-height="max" data-mobile-width="500" data-scrollbar="none" data-download="off" data-tracking="on" data-newwindow="on" data-pagetextbox="off" data-scrolltotop="off" data-startzoom="100" data-startfpzoom="100" data-download-nonce="f55003eba4" data-disablerightclick="on" data-toolbar="bottom" data-toolbar-fixed="off">titleofpdf<br/></a>;

Answer 1

As previous poster mentioned PHP Shortcodes are excecuted on the server-side thus cannot be excecuted via direct Javascript, for this you can make an AJAX call (depending on the type of output you're expecting)

您可以尝试以下方法（未经测试，但我认为您会明白的）:)

此代码进入您的 functions.php 文件：

<?php
// Load your custom js file
function my_enqueue() {
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/custom.js', array('jquery') );
    // Here we need to send the ajax_urladmin-ajax url as a variable to the external JS file since we can't use PHP to get the URI in Javascript
    wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

// Add a method for opeing the PDF
function loadPDF() {
    $url = isset($_REQUEST["post_id"]) ? $_REQUEST["post_id"] : null;

    if(!$url) // { } Handle invalid URL / Perform checks

    echo do_shortcode('[pdf-embedder url="'.$url.'"]');
}

// Define our ajax hooks
// wp_ajax_nopriv_ = for visitors
// wp_ajax_ = for logged in users
add_action( 'wp_ajax_loadPDF', 'loadPDF' );
add_action( 'wp_ajax_nopriv_loadPDF', 'loadPDF' );
?>

此代码进入您的自定义 js 文件：

jQuery( document ).ready() {
    jQuery('.pdf-button').on('click', function() {
        // Get the URL that should be loaded
        var url = jQuery(this).data('url');

        jQuery.ajax({
            type: "post",
            url : ajax_object.ajaxurl,
            data : {action: "loadPDF", url: url},
            success: function(data){
                // Redirect the output to a container ie. div
                jQuery('.my-container').html(data);
            }
        });
    });
});

示例 HTML：

<div class="btn pdf-button" data-url="http://example.com/wp-content/uploads/securepdfs/2019/11/nameofpdf.pdf">
</div>

<div class="my-container">
<!-- PDF Output -->
</div>