Completely handle the scroll bar in the IFRAME (frame)! A

Source: Internet
Author: User

Completely handle the scroll bar in the IFRAME (frame). A

Description
1, this article refers to a large number of information on the network, I am deeply grateful.
2, this article assumes that the reader, has a certain degree of HTML, CSS, JS base.
3, the goal of this article is to use the <iframe> tag in page A to refer to the B Web page, there are several solutions to this situation on page A.
4. Because of the length of the relationship, the article is divided into two parts. Normally, (i) will be able to solve your problem, (ii) the problem and the related solution would be discussed in depth.
5, if you think I long-winded, please directly from the beginning of the program read.
6, the document attachment has a variety of solutions to the sample code for everyone to download, I try to put each option in a separate folder inside. (This is an ASP case, which may contain some ASP code.) )
7, there are two ways to solve the problem: CSS and JS, I tend to use JS this method.
8. When you actually encounter this problem, there are two cases: I on a page of the size of the IFRAME fixed, not allowed to extend (Lacoine or elongated), but the content of the B page than the IFRAME long (also have a wide, I actually work encountered in the long time more, this article also only discusses the long situation, The width of the situation and so on, the corresponding height change to the width of the line. II A page can not limit the length of the IFRAME, b page length exceeds the length of the IFRAME, b page may extend the length of the IFRAME, usually b page will be the length of a page automatically extended.
i) This situation is usually used in the home page, the home page of these places, the occurrence of more times.
II This situation is relatively small, I use NetEase mailbox "Notepad" when I found that NetEase mailbox This situation, the study was used in an online sales site product review (http://www.pplily.com/product_view.asp?id=1380). A list of comments, placed in <iframe>, varies according to how many,<iframe> of a comment, and the length of the entire page changes.
9. Sample code Download:
Http://www.jqs0086.com/ncp/images/completely handle the IFRAME scroll bar. rar


The situation I am experiencing today is, I, and II are all "catching up" in both cases. Study for a good while, finally put the relevant problems are solved, now summed up.

I now describe the following three files that will be used:
1, a file, the home page, the middle has a width:450 and heidth:260 <iframe>. The ID of the IFRAME is Sellmoney the file that points to is B.
A file section code: < iframe src = "B" width = "450" height = "scrolling" = "" frameborder = "0" hspace = "0" vspace = "0" id = "Sellmoney" allowtransparency = "true" ></iframe >

2, b file, a list of data, data about 50 rows, 30 rows per page, divided into two pages, the width of automatic, height (30 rows of data actual height) 800px or so.
B File Part code: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta HTTP-EQUIV = "Content-type" Content = "text/html"; charset=gb2312 "/>
< title >::::::-The net of the receiving list </TITLE >

< STYLE type =text/css > ...
Body {...} {
font-size:12px;
/**//*width:430px;*/
margin:0px;
padding:0px;
}
Html,body{...} {
/**//* Overflow-x:hidden;
*/
}
TD {...} {
font-size:12px;
}
TH {...} {
font-size:12px;
}
</STYLE >

< body bgcolor = "Transparent" >
< TABLE width = "100%" border = "0" align = "center" cellpadding = "0" cellspacing = "1" id = "listtable" valign = Top ">
< TR >
< TD >
<!--This place is a data listing program. -->
</TD >
</TR >

</TABLE >
< TABLE width = "90%" border = "0" align = "center" cellpadding = "0" cellspacing = "0" >
< TR >
< TD >
<!--This place is a paging program. -->
</TD >
</TR >
</TABLE >
</Body >
</HTML >
< script language = "JavaScript" type = "Text/javascript" > ...

function Expandwindow () ... {
try{
var Sellmoney=top.window.document.getelementbyid ("Sellmoney");
var pagewidth = (document.body.clientwidth?document.body.clientwidth:document.documentelement.clientwidth);
Sellmoney.style.height= pagewidth+0;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.