How can I use html file into another one - html

I am creating a web site include navigation bar using only front end code...html ,css and script. but I want to add nav bar in each page by an already created html file.
I am using HTML5 that deprecated frameset tag. So which technique could I use without other backend code to add that html file to another one? Thanks.
<frameset rows="200,*" frameborder="no" border="0" id="container" scrolling="yes">
<frame src="nav.html" name="leftframe" scrolling="no" noresize="noresize" id="nav" />
<frame src="slider.html" name="rightframe" scrolling="no" noresize="noresize" id="slider" />
<frame src="text.html" name="bottomframe" scrolling="no" noresize="noresize" id="text" />
<frame src="copy.html" name="bottomframe" scrolling="no" noresize="noresize" id="text" />
</frameset>

You can switch <frame> for the <iframe> element and get the same results with some CSS.

using jQuery:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$("#navbar").load("navbar.html");
});
</script>
</head>
<body>
<div id="navbar"></div>
</body>
</html>

Related

Unable to use _parent in target attribute HTML

I am trying to use the target attribute with _parent as its value.
Here is the first code
<html>
<head></head>
<frameset rows="30%,70%" >
// About Frame1
<frame src="" name="" />
// about Frame2
<frameset cols="50%,50%">
<frame src="targetattribute_file1.html" name="" />
<frame src="" name="" />
</frameset>
</frameset>
<body>
</body>
</html>
And this is my second file (targetattribute_file1.html )
<html>
<head></head>
<body>
Click here for youtube
</body>
</html>
It opens the file in a full window instead of opening in the parent frame. Wats wrong with code??

Locating Element within the Frameset in Html using selenium Webdriver

I have the following html code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<frameset id="mainFrameset" bordercolor="#000000" border="2" framespacing="2" frameborder="1" rows="55,*" name="mainFrameset">
<frame scrolling="no" noresize="noresize" marginwidth="0" marginheight="0" src="title.jsp" name="titleFrame">
<frameset id="innerFrameset" framespacing="0" border="0" frameborder="0" cols="20.0%,*" name="innerFrameset">
<frame scrolling="auto" target="mainFrame" noresize="noresize" marginwidth="0" marginheight="0" src="dynamicContents.jsp" name="contentFrame">
<frame scrolling="auto" marginwidth="0" marginheight="0" src="Welcome.jsp" name="mainFrame">
<html>
<head>
<title>retailJava Home</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
</head>
<frameset id="mainFrameset" bordercolor="#000000" border="0" framespacing="0" frameborder="no" rows="*,*">
<frame scrolling="auto" marginwidth="0" marginheight="0" src="WelcomeMain.jsp" name="welcomeMain">
<html>
<head>
<title>Welcome to retail-j</title>
<link type="text/css" href="/rjBackOffice/stylesheets/maintenance.classic.css" rel="stylesheet">
<base target="_self">
</head>
<body text="#000000" leftmargin="0" topmargin="0">
<div id="WelcomeContainer">
<div id="HeaderLogo">
<div id="WelcomeMessages">
<span id="WelcomeMessage">Welcome to retail-j</span>
<span id="LoginInformation">You are currently logged in as BOB</span>
</div>
</div>
</body>
</html>
</frame>
<frame scrolling="auto" marginwidth="0" marginheight="0" src="SystemManagement/InScreenApplicationAlertViewerServlet" name="alertFrame">
<html>
</frame>
</frameset>
<noframes> <body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0"> Sorry your browser does not support framesets. </body> </noframes>
</html>
</frame>
</frameset>
<noframes> <body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0"> Sorry your browser does not support framesets. </body> </noframes>
</frameset>
</html>
I am trying to locate the the span element with id WelcomeMessage from the above html code. I tried the following to locate
driver.switchTo().frame("welcomeMain");
WebElement element=driver.findElement(By.xpath(".//*[#id='WelcomeMessage']");
Kindly let me know how to switch between framesets/frames [in case of a complex html with convoluted frames as shown above]and locate the elements inside them.
I get the error " unable to locate element welcomeMain......"
Kindly reply to sort this , thanks in advance.
It might be the issue because of your webdriver control may already inside the default frame, and you may need to take the control out of all frame first before taking it to another frame.
Check whether you are able to switch to all the frames available in that page by using below code and this should be working fine.
for (WebElement e :driver.findElements(By.tagName("frame")))
{
driver.switchTo().defaultContent();
driver.switchTo().frame(e);
if(driver.findElement(By.xpath("yourElement")).isDisplayed())
{
driver.findElement(By.xpath("yourElement")).click();
break;
}
else
continue;
}

Frame diplay Issue: 1st Frame content gets hide behing 2nd frame

<head>
<title>Lead Management System</title>
</head>
<frameset rows="13%,*,3%" border="0" frameborder="0" style="z-index:4">
<frame name="navigation" target="main" src="navigation.php" scrolling="No" style="z-index:100">
<frameset cols="18%,*" border="0" frameborder="0">
<frame name="menu" target="main" src="menu.php" scrolling="No" style="z-index:10">
<frame name="main" src="start.php" scrolling="auto" noresize style="z-index:11">
</frameset>
<frame name="footer" target="main" src="footer.php" scrolling="No" style="z-index:12">
</frameset>
Also i had tried z-index concept for it but it didn't help me at all..So please is there any way that my 1st frame content should always be on top of second frame if there is any dropdown or other fields which does not gets fit in its own 1st frame.
I also referd some questions already in stackverflow but i was not able to solve it...

Need help resizing this HTML frame

Ok so I've NEVER worked with frames before but a higher power has forced my hand this time.
What I need to be able to do is resize the 'footer.html' frame within this template.
<html>
<head>
<title>Store Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="*,1034,*" frameborder="NO" border="0" framespacing="0">
<frame name="sideblanks" scrolling="NO" src="blank_left.html">
<frameset rows="135,*,25" frameborder="NO" border="0" framespacing="0">
<frame name="top" scrolling="NO" noresize src="top_nav.html" >
<frameset cols="200,*" frameborder="NO" border="0" framespacing="0">
<frame name="meny" noresize scrolling="NO" src="menu_1.html">
<frame name="content" src="content.html">
</frameset>
<frame name="chart" scrolling="NO" noresize src="footer.html">
</frameset>
<frame name="sideblanks" scrolling="NO" src="blank_right.html">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
I feel like a complete novice again. I don't like it, I'm scared.
Any help would be great.
Adjust the numeric values here:
<frameset rows="135,*,25" frameborder="NO" border="0" framespacing="0">
you have used "rows" and "columns" you can set the height of the frame with rows or with CSS.
if you need to dynamically alter the height of the frame you might be able to do this with javascript or JQuery but you have to reference it as parent. to make sure you are in the right window.
when are you wanting the height of the frame to change?

How do I create two frames with no space between them?

I'd like to have two frames with no space between them. Here's my test case:
<html>
<frameset framespacing="0" rows="50%, 50%">
<frame frameborder="0" src="red.html" scrolling="no" noresize="1" />
<frame frameborder="0" src="red.html" />
</frameset>
</html>
red.html is just:
<html><body bgcolor="red"></body></html>
When I render this, however, I get a white line between the two frames. How do I make it go away?
You need to specify the FrameBorder property in the Frameset tag.
So, your main page will look like this:
<html>
<frameset framespacing="0" rows="50%, 50%" frameborder="0">
<frame frameborder="0" src="red.html" scrolling="no" noresize="1" />
<frame frameborder="0" src="red.html" />
</frameset>
</html>
This will solve your problem.
<html>
<frameset framespacing="0" rows="50%, 50%" framespacing="0" frameborder=no>
<frame frameborder="0" src="red.html" scrolling="no" noresize="1" />
<frame frameborder="0" src="red.html" />
</frameset>
</html>
frameborder=no is very important.
It is always preferred to use css styles instead of frameborder attribute.
<frameset cols="50%,50%">
<frame src="frame_1.htm" style="border:none">
<frame src="frame_2.htm">
</frameset>
Better to use iframe and divs where ever possible.
Further frameset is not supported in HTML5.
Add border=0 to your frameset tag.
Here is an example of working code that I have used in the past that has no white line.
<frameset rows="10%,*" noresize framespacing=0 frameborder=no border=0 >
<frameset cols="140,*" noresize framespacing=0 frameborder=no border=0 >
<frame name="globe" scrolling="no" src="./GIF/globe.jpg" marginwidth="0 marginheight="0">
<frame name="logo" src="logo.htm" scrolling="no" >
</frameset>
<frameset cols="160,*" noresize framespacing=0 frameborder=no border=0 >
<frame name="userselections" src="userselections.php" scrolling="auto">
<frame name="results" src="nothing.htm" scrolling="auto">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>