如何在 javascript 中创建一个按钮，当用户单击该按钮时将打开 iframe？答案

【问题标题】：How to create a button in javascript that will open iframe when user clicks on that button?如何在 javascript 中创建一个按钮，当用户单击该按钮时将打开 iframe？
【发布时间】：2013-04-07 23:24:22
【问题描述】：

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

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

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

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

我知道 Facebook 为他们的 cmets 提供了比这更好的东西，所以如果你知道的东西比我的想法更好，请随时分享。

【问题讨论】：

Facebook 甚至为此使用 iframe 吗？ ajax 可能会更容易管理
你愿意使用 jquery 吗？
Jonast92，我可以随意使用 jquery。还有 Kevin B，如果你现在如何用 ajax 创建它，如果能在这里写就太好了。
看看 jQuery UI 对话框。它具有 ajax 支持，并且会比 iframe 更好地工作。 jqueryui.com/dialog/#modal-form

标签： php javascript html iframe

【解决方案1】：

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

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

或者您可以将所有 cmets 加载到 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>

【讨论】：

谢谢。我使用了第二种解决方案，只需要添加 style="display: none;"
以便在页面加载后隐藏 div。唯一的问题是，在我单击 Show Comment 并加载 cmets 后，Show Comments 并没有消失。有没有办法在点击后显示评论消失？或者更好的是，是否可以将 Show Comments 更改为 Hide Comments，当您单击 Hide Comments 时，cmets 被隐藏，并且 Show Comments 再次出现。我希望你明白我想要达到的目标。再次感谢您。
<script> $(".show-comments").click(function(){ if($(this).text() == "Show Comments") { $(".comments-container").slideDown("slow"); $(this).addClass("comments-shown"); } else { $(".comments-container").slideUp("slow"); $(this).text("Hide Comments"); $(this).removeClass("comments-shown"); } }); </script> 试试看，我还在按钮中添加了“cmets shown”类，以便您可以对其应用一些样式。让我知道进展如何 =)

【解决方案2】：

尝试使用诸如 prettyPhoto 之类的东西：

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

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

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

您需要将文章的 ID 存储在视图 cmets 链接的属性中，以便您可以通过 .load 请求传递您想要 cmets 的文章的 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") )};
});

【讨论】：