（慢慢地）在 WordPress 中制作弹出窗口

Posted 2023-05-09

【中文标题】（慢慢地）在 WordPress 中制作弹出窗口

【英文标题】：(Slowly) Making Popups in WordPress

【发布时间】：2021-06-05 03:45:19

【问题描述】：

..希望有人可以提供帮助。

我正在为我的 WordPress 网站创建自己的弹出窗口功能。

以下代码的许多部分都是从网络上收集的，并且一切正常。

有了它，我可以在一个 html 页面上选择几个

正如我所说，它有效，但效果不佳，因为我有一个性能问题——我似乎无法确定。

主要是：我实际上可以看到正在填写的包含文件，轻微的延迟仅在屏幕上显示一秒钟，但我可以看到。

结论：有些不对劲。

也许你们中最优秀的程序员之一可以通过经验丰富的眼睛检查代码，.. 然后指出任何弹出的内容？ - 或者不！

背景：- /* [ css ] - [ js ] 是位于主题目录路径之外的目录，都可以正常工作。 在我的 functions.php 文件中，我将 [ jquery-ui.css ] 在页脚中排入队列。 经过大量的试验和错误，我现在将 [ jquery-ui-min.js ] 文件放在标题中。 顺便说一句：我没有使用版本号，它们只是出于习惯。 我在下面的示例中放置了 [ true - the default ]，只是为了说明区别。 */

wp_enqueue_style( 'jquery-effects', get_template_directory_uri( __FILE__ ) . '/css/jquery-ui.css' , array(),  '1.0.0',  true );
wp_enqueue_script( 'jquery-core-ui', get_template_directory_uri( __FILE__ ) . '/js/jquery-ui-min.js', array( 'jquery', 'jquery-ui-dialog' ), '1.0.0',  false );

HTML:- !>- 在我的网页上，我有一个围绕 iFrame 的 Div：用于接受文件输入。 ->

<div id="somediv" title="&equiv; [ POPUP ] &equiv;" style="display:none;">
    <iframe id="thedialog"   ></iframe>
</div>

CSS:- /* 我只是使用 [jquery-ui.css] 文件中的通用 [ui-dialog] 类。 */

.ui-dialog 
    position: fixed;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
    background: blue; 

JS:- // 这是我正在使用的js代码。

jQuery( document ).ready( function( $ ) 

    $( ".trigger" ).click( function ()
    
        // The code below constructs a clean path to my WordPress page.
        // It is saved under a '/cuttings/' parent, and it works ..
        
        var submitUrl = document.location.origin + '/cuttings/' +  $(this).attr("href");       
        $("#thedialog").attr('src',  submitUrl );        
        $("#somediv").dialog(
          
            width: 500,
            height: 500,
            modal: true,
            close: function () 
            
                $("#thedialog").attr('src', "about:blank");
                       
        );
        return false;
    );   
);

wordpress:- /* 我在WordPress中构建了一个完全空白的模板，如下。 */

<?php
/* 
Template Name: WordPress Blank
*/
if ( have_posts() ) : while ( have_posts() ) :     
        the_post();
        the_content();
     endwhile; 
else: 
    echo '<p>Nothing Found!</p>';
endif
?>

它可以工作，并且只是输出 WordPress 页面的内容，没有任何格式。另外：存储在 /cuttings/ 下的 WordPress 帮助页面都是使用这个模板保存的。

正如我所说：这一切都按预期工作，除了填充 iFrame 弹出窗口时稍有延迟。

那么，任何人都可以看到问题（？？？）

【问题讨论】：

在 iframe 中加载页面并不是即时的，就像在浏览器选项卡中加载新页面一样。必须向服务器请求所有资源，然后需要渲染结果

【参考方案1】：

确实很慢，但是如果 submitUrl 没有结尾“/”，我看到每次点击有 2 个请求，第一个总是失败，并出现 301 临时移动状态。很奇怪。

【讨论】：

我想知道如果您使用带有 js XMLHttpRequest 对象的 json 文件，这种技术是否会更快，对吧？ json 文件可以转到同一个子文件夹，但不会将整个页面加载到通过 wordpress 页面创建机制的 iFrame 中。