2

我正在为我网站上的帖子发表评论。如何在 javascript 中创建一个按钮，当用户单击该按钮时将打开带有注释的 iframe 窗口？像 Facebook 这样的东西有他们对帖子的评论。如果有办法用其他语言创建它，我希望你写它。我刚刚写了 javascript，因为我听说你可以在 javascript 中做到这一点。如果有更优雅和/或更好的方式，请随意编写。所以在每篇文章下面我都会添加一个按钮，当用户点击它时，它应该会打开如下内容：

<iframe src="comment.php?postid=<?php echo $postid; ?>" 
    width=600px; 
    height=500px;>
</iframe>

有没有一种方法只在您单击按钮时才加载 iframe 窗口，而不是与发布帖子的页面同时加载？例如，如果我在一页上有 10 篇文章，并且所有 10 篇文章的评论与包含文章的页面同时加载，则会大大降低页面速度。

你也知道如何根据帖子数量调整 iframe 窗口大小，如果帖子有 1 条评论，窗口大小为 100 像素，如果帖子有 5 条评论，窗口大小为 500 像素？

我知道 Facebook 对他们的评论有比这更好的东西，所以如果你知道比我的想法更好的东西，请随时分享。

4

3 回答 3

0

我会 jquery .load、.post、.get 或 .ajax

在每篇文章下都有一个名为 comments 的 div 类，并且在该 div 上不显示任何 CSS。当用户单击该文章的查看评论按钮时，向服务器发送请求并请求对该文章 ID 的评论。

您将希望将文章的 ID 存储在查看评论链接的属性中，以便您可以向 .load 请求传递您想要评论的文章的 ID。

<div articleid="5" class="view-com-button">view comments</div>
<div class="comment" articleid="5" style="display:none"></div>
$(".view-com-button").click(function(event){
$(".comment[articleid='$(this).attrib("articleid").load("comment.php", {( "idarticle" : $(this).attrib("articleid") )};
});
于 2013-04-15T20:17:27.330 回答
0

尝试使用类似 prettyPhoto 的东西：

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

如果您在该页面上向下滚动，您将看到加载的窗口显示 iFrame 的示例。为网站创建类似半 ajax 的功能非常方便。你几乎可以使用任何 Lightbox 克隆来做类似的事情，但我发现 prettyPhoto 是最强大的，并且有相当多的支持。这确实使用 jQuery 和它自己的 javascript 文件来工作，但它是最小的。

希望这可以帮助。

于 2013-04-15T19:24:39.970 回答
0

你的问题的一个简单的解决方案是..

    <html>
    ..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
    <body>
    ...
    <div class='comments-container'></div>
    <a class='show-comments' href='#'>Show Comments</a>
    ...
    <script>
    $(".show-comments").click(function(){
    $(".comments-container").html('<iframe src="comment.php?postid=<?php echo $postid; ?>" 
        width=600px; 
        height=500px;>
    </iframe>');
    });
    </script>
</body>
</html>

或者您可以将所有评论加载到 div 元素上，默认情况下隐藏该元素，然后单击按钮后，您可以显示它。该解决方案可能是

<html>
    ..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
    <body>
    ...
    <div class='comments-container'>
comment 1: ----    
comment 2: -----
</div>
    <a class='show-comments' href='#'>Show Comments</a>
    ...
    <script>
    $(".show-comments").click(function(){
    $(".comments-container").slideDown("slow");
    });
    </script>
</body>
</html>
于 2013-04-15T19:25:05.733 回答