Question

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

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

有没有一种方法，iframe窗口只在你点击按钮时加载，而不是与帖子的页面同时加载？例如，如果我在一个页面上有10个帖子，并且所有10个帖子的评论与包含帖子的页面同时加载，则会大大减慢页面的速度。

您也知道如何将iframe窗口大小调整为帖子数量，这样如果帖子有1条评论，窗口大小为100px，如果帖子有5条评论，则窗口大小为500px？

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

Answer 1

尝试使用像prettyPhoto这样的东西：

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

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

希望这有帮助。

Answer 2

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

    <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>

Answer 3

我会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") )};
});

如何在javascript中创建一个按钮，当用户点击该按钮时会打开iframe？

3 个答案: