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

Question

I'm working on comments for posts on my website. 我正在为我网站上的帖子发表评论。 How to create a button in javascript that will open iframe window with comments when user clicks on that button? 如何在JavaScript中创建一个按钮，当用户单击该按钮时，该按钮会打开带注释的iframe窗口？ Something like Facebook have with their comments on posts. 诸如Facebook之类的东西会对他们的帖子发表评论。 If there is a way to create this with other language I would like that you write it. 如果有办法用其他语言创建它，我希望您编写它。 I just wrote javascript because I heard that you can do that in javascript. 我刚刚编写了javascript，因为听说您可以在javascript中进行操作。 If there is a more elegant and/or better way feel free to write it. 如果有更优雅和/或更佳的方法，请随时编写。 So below every posts I would add a button and when user clicks on it, it should open something like this: 因此，在每个帖子下方，我都会添加一个按钮，当用户单击它时，它应打开如下所示的内容：

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

And is there a way that iframe window loads only when you click on the button, not in the same time as page on which are posts? 有没有一种方法可以让iframe窗口仅在您单击按钮时加载，而不是与帖子所在页面同时加载？ For example, if I have 10 posts on one page, and comments for all 10 posts are loading at the same time as the page with posts, it would slow down a page a lot. 例如，如果我在一个页面上有10个帖子，并且所有10个帖子的评论与带有帖子的页面同时加载，那么这会大大降低页面的速度。

Also do you know how to adjust iframe window size to amount of posts, so that if a post have 1 comment, window size is 100px, and if a posts have 5 comments, window size is 500px? 您还知道如何调整iframe窗口大小以适应帖子数量，以便如果帖子包含1条评论，则窗口大小为100px，如果帖子包含5条评论，则窗口大小为500px？

I know that Facebook have something much better than this for their comments, so if you know something better than my idea, please feel free to share it. 我知道Facebook的评论比这要好得多，因此，如果您知道的比我的想法还好，请随时分享。

Answer 1

Try using something like prettyPhoto: 尝试使用诸如prettyPhoto之类的东西：

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

If you scroll down on that page you will see an example where the loaded window displays an iFrame. 如果向下滚动该页面，您将看到一个示例，其中已加载的窗口显示一个iFrame。 Very handy for creating semi-ajax-like functionality to a website. 为网站创建类似半ajax的功能非常方便。 You can use pretty much any lightbox clone out there for something like this, but I have found that prettyPhoto is the most robust and has a decent amount of support out there. 您可以在其中使用几乎所有的灯箱克隆来进行类似的操作，但是我发现prettyPhoto是最可靠的，并且在那里提供了不错的支持。 This does use jQuery to work as well as it's own javascript file to function, but it is minimal. 这确实使用jQuery以及其自身的javascript文件正常工作，但是它很小。

Hope this helps. 希望这可以帮助。

Answer 2

A trivial solution to your question would be.. 一个简单的解决方案将是您的问题。

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

Or you can load all the comments onto a div element, and by default have that element hidden, and then once clicked on a button, you can show it. 或者，您可以将所有注释加载到div元素上，默认情况下将其隐藏，然后单击按钮后即可显示它。 That solution could be 该解决方案可能是

<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

I would jquery .load, .post, .get or .ajax 我会jQuery .load，.post，.get或.ajax

under every article have a div class named comments and display none css on that div. 在每篇文章下都有一个名为注释的div类，并且在该div上不显示任何CSS。 when the user clicks the view comments button for that article, send a request to the server and ask for comments for that article id. 当用户单击该文章的“查看评论”按钮时，向服务器发送请求，并请求该文章ID的评论。

you will want to store the id of the article in an attribute of the view comments link so that you can pass the .load request the id of the article you want comments for. 您将需要将文章的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 个解决方案

解决方案1
0 2013-04-15 19:24:39

解决方案2
0 已采纳

解决方案3
0 2013-04-15 20:17:27

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

问题描述

3 个解决方案

解决方案1 0 2013-04-15 19:24:39

解决方案2 0 已采纳

解决方案3 0 2013-04-15 20:17:27

解决方案1
0 2013-04-15 19:24:39

解决方案2
0 已采纳

解决方案3
0 2013-04-15 20:17:27