How to create a button in javascript that will ope

2019-07-17 01:46发布

站内问答 / PHP
509 3 6

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? Something like Facebook have with their comments on posts. 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. 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? 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.

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?

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.

3条回答
我命由我不由天
2楼-- · 2019-07-17 02:15

Try using something like prettyPhoto:

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. Very handy for creating semi-ajax-like functionality to a website. 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. This does use jQuery to work as well as it's own javascript file to function, but it is minimal.

Hope this helps.

查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
3楼-- · 2019-07-17 02:37

I would jquery .load, .post, .get or .ajax

under every article have a div class named comments and display none css on that div. 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.

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.

<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") )};
});
查看更多
0人赞 添加讨论(0) 举报
够拽才男人
4楼-- · 2019-07-17 02:41

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. 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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)