javascript - jQuery 加载带有转义字符的本地 iframe url 以进行 disqus 评论

Question

我正在加载一个自定义页面类型，它只是一个帖子的评论。这样，当多个循环帖子位于单个页面上时，我可以使用 Disqus 线程来提高可用性。

加载 iFrame 时使用以下结构我不断收到此语法错误。我的转义字符错了吗？

$(".boxyComments a").click(function (event) {
                    event.preventDefault();
                    var post_id = $(this).attr("rel");
    $(".commentsIframeBig")
    .get(0).contentWindow.location.href =
        $("<?php echo get_site_url(); ?>","\/ajax-post-fold\/",post_id);

发生的事情是 get检索 Wordpress Hook 以打印站点 url(在这种情况下，第一次调用打印 http://whateverdomainex.com，第二次应打印 /ajax-post-fold/，最后一次调用应打印帖子 ID，因此整个 url 最终打印为 http://whateverdomanex.com/ajax-post-fold/2825。

相反，我的 Chrome 控制台显示以下消息:

Uncaught Error: Syntax error, unrecognized expression: /ajax-post-fold/

更新

我已经把这个变量放在适当的位置并调用它而不是 $("<?php echo get_site_url(); ?>","\/ajax-post-fold\/",post_id);作为 get引用:

var postLink = $("<?php echo get_site_url(); ?>"+"\/ajax-post-fold\/"+post_id);

这样实现的:

$(".boxyComments a").click(function (event) {
                    event.preventDefault();
var postLink = $("<?php echo get_site_url(); ?>"+"\/ajax-post-fold\/"+post_id);
                    var post_id = $(this).attr("rel");
    $(".commentsIframeBig")
    .get(0).contentWindow.location.href = postLink;

这给了我以下 Chrome 消息:

Uncaught Error: Syntax error, unrecognized expression: http://www.theciv.com/ajax-post-fold/28448 

应该在 src 中的 URL iFrame 的属性看起来应该没问题，但是为什么仍然输出这个语法错误？

更新

var postLink = "<?= site_url('\/ajax-post\/'); ?>"+post_id;

$(this).closest(".boxy").find(".commentsIframeBig")
.css("display","block")
.animate({height:  "100%"}, 500)
.get(0).contentWindow.location.href = postLink;

使用上面的正确结构，自定义页面现在正在加载到 iFrame 中。但是 +page_id 的附加构造其中包括 rel包含帖子 ID 的属性未正确加载。

此外，当调用新的 url 作为原始自定义页面模板时，添加帖子的 id 不会加载带有帖子 id 的正确页面。困惑了吗？再读一遍。我花了一些时间才写下这句话。

无论如何，现在我的任务是在添加自定义页面和 post_id 时加载帖子 ID作为 iFrame 的 url 正确加载的附加字符串。

更新

这是将 Disqus 评论加载到同一页面的最终工作代码，伪多次。

基本上这是在推送 post id到自定义页面类型的末尾，导致帖子的内容和属性元素被加载到自定义页面模板中。

当剥离该自定义页面模板以仅显示页面评论时，您可以创建一个加载/卸载 react ，您只需调用一次 Disqus，删除该实例，然后在另一个实例时再次加载它 Load Comments在同一页面上随后加载的帖子中单击按钮。耶。多个 Disqus 以最少的 Ajax 加载在一个页面上发表评论。

这是几乎适合我的结构等。只剩下 2 个错误。首先是清空时的二次加载，然后使用 .ajaxComplete() 将新的 Disqus 页面重新加载到 Ajax 元素中。回调函数。

现在的情况是基本上根本没有触发回调。据我所知。然而，第二次点击它，确实会调用电话。但这是因为满足 else 的类参数声明。

剩下的第二个错误是我很难弄清楚如何放大适当的元素，同时让其他元素保持相同大小。

// Load comments and/or custom post content
    $(".boxyComments a").click(function (event) {
        event.preventDefault();
        $.ajaxSetup({cache:false});
        var post_id = $(this).attr("rel");      var excHeight = $(this).closest('.boxy').find('.initialPostLoad').height();
        var postHeight = $(this).closest('.boxy').find('.articleImageThumb').height();
        var postWidth = $(this).closest('.boxy').find('.articleImageThumb').width();

            // close other comments boxes that may already be open
            if($('.commentsOpen').length ) {
                console.log('comments are open');

                $('.bigBoxy').closest('.boxy')
                    .animate({height:(postHeight + excHeight)}, 500);

                $('.showComments')
                    .removeClass('bigBoxy')
                    .removeClass('commentsOpen');

                $('.commentsAjax')
                    .empty(function(){

                        $(this).closest(".boxy").find(".showComments")
                            .addClass("commentsOpen")
                            .addClass("bigBoxy");

                        $(".bigBoxy").find(".commentsAjax ")
                            .css("display","block")
                            .animate({height:  "500px"}, 500)
                            .load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax-post/",{id:post_id});

                        $(this).closest(".boxy")
                            .ajaxComplete(function() {
                                var excHeight = $(this).closest('.boxy').find('.initialPostLoad')
                                    .height();
                                var postHeight = $(this).closest('.boxy').find('.articleImageThumb')
                                    .height();
                                $(this).closest(".boxy").animate({height:  (postHeight + excHeight)}, 500)
                    });
                });

            } else {

                $(this).closest(".boxyComments").find(".showComments")
                    .addClass("commentsOpen")
                    .addClass("bigBoxy");

                $(this).closest(".boxy").find(".commentsAjax")
                    .css("display","block")
                    .animate({height:  "500px"}, 500)
                    .load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax-post/",{id:post_id});

                $(this).closest(".boxy")
                    .ajaxComplete(function() {
                        var excHeight = $(this).closest('.boxy').find('.initialPostLoad')
                            .height();
                        var postHeight = $(this).closest('.boxy').find('.articleImageThumb')
                            .height();
                        $(this).closest(".boxy").animate({height:  (postHeight + excHeight)}, 500)
                    });
            }

        });

Answer 1

好的，这里有完整的工作代码来做你想做的事。您必须为您的实际代码换出一些占位符:

<script>
  jQuery(document).ready(function($){$(".boxyComments a").click(function (event) {
event.preventDefault();
    var post_id = $(this).attr("rel");
var postLink = "<?= site_url('/path/'); ?>"+post_id;
    $("#myFrame").attr('src', postLink);
});
});
</script>

以及示例 div 和 iFrame:

<div class='boxyComments'>
<a href='#' rel='some-url'>test link</a>
</div>

<div class=".commentsIframeBig">
<iframe id='myFrame' height="500px" width="800px" src=''>     
    </iframe>
</div>

本地测试没问题。您可能遇到了无法正确访问 iFrame 的问题。如果您可以为 iFrame 提供一个 id，那么它会更容易。