1

我正在加载一个自定义页面类型，它只是对帖子的评论。这样当多个循环帖子在一个页面上时，我可以使用 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 挂钩以打印站点 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属性中的 URLiFrame看起来应该没问题，那么为什么仍然输出这个语法错误？

更新

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 的正确页面。迷茫了吗？再读一遍。我花了一段时间才写下那句话。

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

更新

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

基本上，这是将 a 推post id到自定义页面类型的末尾，从而导致帖子的内容和可归因元素被加载到自定义页面模板中。

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

这是几乎对我有用的结构等。只剩下 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)
                    });
            }

        });
4

3 回答 3

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 让它更容易。

于 2013-07-29T18:48:56.483 回答
1

这是因为您将 var postlink 声明为 jQuery 对象。您只需将其作为字符串获取，然后您可以将其传递给 iframe。

var post_id = $(this).attr("rel");
var postLink = "<?= site_url('/ajax-post-fold/'); ?>"+post_id;
于 2013-07-26T22:39:25.550 回答
0

更新 2

看起来字符串<?= get_site_url() ?>毕竟不应该包含在里面。

相反，我创建了一些变量来影响它。代码更新如下：

var postDir = "\/ajax-post-fold\/";
var postLink = "<?= get_site_url(postDir); ?>"+"\/ajax-post-fold\/"+post_id;
于 2013-07-28T00:04:12.307 回答