Member Avatar for b0tz

Hello, I need a script that will be added after </body> and will be displayed at the top of the page.
I know is posible, I have one :

<script type="text/javascript">
var object = document.createElement('div');
object.innerHTML = 'The banner script is HERE';
var body = document.getElementsByTagName('body')[0];
body.insertBefore(object, body.firstChild);
</script>

The problem with this cod is that is shows in forum phpbb3 in the login page and after is loged in twice in the header.

Can someone help me here ?

Kind regards.

  • 3 Contributors
  • 11 Replies
  • 258 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by b0tz
Member Avatar for MattTheHat

I'm not a big PHPBB man myself and i had trouble understanding exactly what is happening to your code but one regular problem with forums is them interpreting code as text expecially when it comes to javascript.

a workaround can be to create page hosted elsewhere on the server and link to that to execute the code.

Please could you be more clear about what is happening and perhaps provide a link?

Member Avatar for essential

Hi everyone,

the first-child access will only work if you have no other nodes' next to the target element. So the safest way to get the 1st-element would be:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style type="text/css" id="css21">
/* <![CDATA[ */
@namespace url( http://www.w3.org/1999/xhtml );

body { 
  background-color : #FFF;
  color : #405060; }


/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = function() {
   if ( document.createElement ) {
      var body = document.getElementsByTagName("body")[ 0 ];
      var fChild = body.getElementsByTagName("*")[ 0 ];
      var obj = document.createElement("div");
      obj.appendChild( document.createTextNode("The banner script is here."));
      body.insertBefore( obj, fChild );
      return;
   } alert("unsupported features, please upgrade your browser");
   return false;
}
// ]]>
</script>
</head>
<body>
<noscript id="noscript">
<p>This website requires <b>JavaScript</b> support.</p>
</noscript>
<div id="div">First Div</div>
</body>
</html>
Member Avatar for b0tz

@MattTheHat

Here is a link where the ads are displayed 2 times.

http://www.ionut.totalh.com/forum/ucp.php?mode=login

@essential

I just want to understand corecly, are you saying that the JS is looking for the <body> tag and if is found more the 1 time, the ad code is shows the exact number of times, found in the php/html page ?

If so, the JS provided by you, is going to stop at the first <body> tag and display only one time ?

By the way, I can only put the JS cod AFTER </body> BEFORE </html>/ ?>

Thank for your help.

LE: In the JS cod provided, can I add my html script ?

Member Avatar for essential

Hi b0tz,

here's your requested script that does the same application and based in your posted code. This script is enhanced by a statement that prevents duplication of dynamic div.

code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
</head>
<body id="body">
<div id="div0">Element 1</div>
<div id="div1">Element 2</div>
<!-- more stuff... -->
</body>
<script type="text/javascript">
<!--
( function() {
   var isBody = document.getElementsByTagName("body")[ 0 ];
      if ( "createElement" in document ) {
      var isObject;
         if ( isObject = document.getElementById("newDiv")) { // this will prevent duplication of dynamic div.
            return false;
         } isObject = document.createElement( "div" );
      isObject.id = "newDiv";
      isObject.appendChild( document.createTextNode("The banner script is HERE."));
      isBody.insertBefore( isObject, isBody.firstChild );
   } 
} )( /* JavaScript 1.5 */ );
// -->
</script>
</html>
Member Avatar for b0tz 
isObject.appendChild( document.createTextNode("The banner script is HERE."));

I don't think that this will help me add html code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
</head>
<body id="body">
<div id="div0">Element 1</div>
<div id="div1">Element 2</div>
<!-- more stuff... -->
</body>
<script type="text/javascript">
<!--
( function() {
   var isBody = document.getElementsByTagName("body")[ 0 ];
      if ( "createElement" in document ) {
      var isObject;
         if ( isObject = document.getElementById("newDiv")) { // this will prevent duplication of dynamic div.
            return false;
         } isObject = document.createElement( "div" );
      isObject.id = "newDiv";
      isObject.appendChild( document.createTextNode("<center><iframe allowtransparency=\"true\" align=\"center\" src=\"http://www.site.org/links.php\" scrolling=\"no\" marginheight=\"0\" frameborder=\"0\" width=\"900px\"height=\"18px\"></iframe><iframe align=\"center\" src=\"http://www.site.org/frame.php\" allowtransparency=\"true\" scrolling=\"no\" marginheight=\"1\" frameborder=\"0\" width=\"900px\" height=\"92px\"></iframe></center>"));
      isBody.insertBefore( isObject, isBody.firstChild );
   } 
} )( /* JavaScript 1.5 */ );
// -->
</script>
</html>

The output is showing only the text that I put there.

Thanks

Member Avatar for essential

Sorry i thought that it was just a simple text insertion. Here's modified version and configured according to your needs:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
</head>
<body id="body">
<!-- DO NOT REMOVE THIS COMMENT, UNLESS YOU HAVE OTHER NODES IN THE BODY DOCUMENT! -->
</body>
<script type="text/javascript">
<!--
( function() {
   var content;
   var isBody = document.getElementsByTagName("body")[ 0 ];
      if ( "createElement" in document ) {
      var isObject;
         if ( isObject = document.getElementById("newDiv")) { // this will prevent duplication of dynamic div.
            return false;
         } isObject = document.createElement( "div" );
      isObject.id = "newDiv";
      var cent = document.createElement("center"); 
      var iAttr = {
      allowtransparensy : true,
      align : "center",
      marginheight : 0,
      width : 900,
      scrolling : "no",
      frameborder : 0 };
      var iframe1 = document.createElement('iframe');
      var iframe2 = document.createElement('iframe');
      for ( var attr in iAttr ) {
         var i1attr = document.createAttribute( attr );
         var i2attr = document.createAttribute( attr );
         i1attr.nodeValue = iAttr[ attr ];
         i2attr.nodeValue = iAttr[ attr ];
         iframe1.setAttributeNode( i1attr ); 
           iframe2.setAttributeNode( i2attr ); 
      }
      iframe1.height = 18;
      iframe2.height = 96;
   // CACHING OVER ITS LOCATION.
      var i1path = new Image();
      var i2path = new Image();
      i1path.src = "http://www.site.org/link.php";
      i2path.src = "http://www.site.org/frame.php";
      cent.appendChild( iframe2 );
      cent.insertBefore( iframe1, iframe2 );
      isObject.appendChild( cent );
      isBody.insertBefore( isObject, isBody.firstChild );
      iframe1.location = i1path.src;
      iframe2.location = i2path.src;
   } 
} )( /* JavaScript 1.5 */ );
// -->
</script>
</html>
Member Avatar for b0tz

wow, you even put my iframe codes. Thank you. I will test them right now and see if are working.

Thank you very much.

I will reply here when all is working. It should take around 20 minutes to update to server.

Thanks again.

Member Avatar for b0tz

I just inserted the cod in a test page and I don't think the iframe is working.

The 2 iframes are :

http://www.site.org/links.php
http://www.site.org/frame.php

In the attached file you will see the exact URL, I will not spam here.

Can you take a look ?

Thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Premium Series
Description: A three-column, fixed-width blog design.
Version    : 1.0
Released   : 20090303

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Premium Series by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="Premium Series" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="header">
	<div id="logo">
		<h1><a href="#"><span>Premium</span>Series</a></h1>
		<p>Designed By Free CSS Templates</p>
	</div>
	<div id="menu">
		<ul id="main">
			<li class="current_page_item"><a href="#">Homepage</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
		<ul id="feed">
			<li><a href="#">Entries RSS</a></li>
			<li><a href="#">Comments RSS</a></li>
		</ul>
	</div>
	
</div>
<!-- end header -->
<div id="wrapper">
	<!-- start page -->
	<div id="page">
		<div id="sidebar1" class="sidebar">
			<ul>
				<li>
					<h2>Recent Posts</h2>
					<ul>
						<li><a href="#">Aliquam libero</a></li>
						<li><a href="#">Consectetuer adipiscing elit</a></li>
						<li><a href="#">Metus aliquam pellentesque</a></li>
						<li><a href="#">Suspendisse iaculis mauris</a></li>
						<li><a href="#">Proin gravida orci porttitor</a></li>
						<li><a href="#">Aliquam libero</a></li>
						<li><a href="#">Consectetuer adipiscing elit</a></li>
						<li><a href="#">Metus aliquam pellentesque</a></li>
						<li><a href="#">Suspendisse iaculis mauris</a></li>
						<li><a href="#">Proin gravida orci porttitor</a></li>
					</ul>
				</li>
				<li>
					<h2>Recent Comments</h2>
					<ul>
						<li><a href="#">Free CSS Templates</a> on <a href="#">Aliquam libero</a></li>
						<li><a href="#">Free CSS Templates</a> on <a href="#">Consectetuer adipiscing elit</a></li>
						<li><a href="#">Free CSS Templates</a> on <a href="#">Metus aliquam pellentesque</a></li>
						<li><a href="#">Free CSS Templates</a> on <a href="#">Suspendisse iaculis mauris</a></li>
						<li><a href="#">Free CSS Templates</a> on <a href="#">Urnanet non molestie semper</a></li>
						<li><a href="#">Free CSS Templates</a> on <a href="#">Proin gravida orci porttitor</a></li>
					</ul>
				</li>
				<li>
					<h2>Categories</h2>
					<ul>
						<li><a href="#">Aliquam libero</a></li>
						<li><a href="#">Consectetuer adipiscing elit</a></li>
						<li><a href="#">Metus aliquam pellentesque</a></li>
						<li><a href="#">Suspendisse iaculis mauris</a></li>
						<li><a href="#">Urnanet non molestie semper</a></li>
						<li><a href="#">Proin gravida orci porttitor</a></li>
					</ul>
				</li>
				<li>
					<h2>Archives</h2>
					<ul>
						<li><a href="#">September</a> (23)</li>
						<li><a href="#">August</a> (31)</li>
						<li><a href="#">July</a> (31)</li>
						<li><a href="#">June</a> (30)</li>
						<li><a href="#">May</a> (31)</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- start content -->
		<div id="content">
			<div class="flower"><img src="images/img06.jpg" alt="" width="510" height="250" /></div>
			<div class="post">
				<h1 class="title"><a href="#">Welcome to Our Website!</a></h1>
				<p class="byline"><small>Posted on October 1st, 2009 by <a href="#">Free CSS Templates</a></small></p>
				<div class="entry">
					<p><strong>Premium Series</strong> is a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're pretty much free to do whatever you want with it  (even use it commercially) provided you keep the links in the footer intact. Have fun with it :)</p>
					<p class="links"><a href="#" class="more">&laquo;&laquo;&nbsp;&nbsp;Read More&nbsp;&nbsp;&raquo;&raquo;</a></p>
				</div>
			</div>
			<div class="post">
				<h2 class="title"><a href="#">Sample Tags</a></h2>
				<p class="byline"><small>Posted on October 1st, 2009 by <a href="#">Free CSS Templates</a></small></p>
				<div class="entry">
					<h3>An H3 Followed by a Blockquote:</h3>
					<blockquote>
						<p>&#8220;Donec leo, vivamus nibh in augue at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.&#8221;</p>
					</blockquote>
					<h3>Bulleted List:</h3>
					<ul>
						<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
						<li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
						<li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
					</ul>
					<h3>Numbered List:</h3>
					<ol>
						<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
						<li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
						<li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
					</ol>
					<p class="links"><a href="#" class="more">&laquo;&laquo;&nbsp;&nbsp;Read More&nbsp;&nbsp;&raquo;&raquo;</a></p>
				</div>
			</div>
			<div class="post">
				<h2 class="title"><a href="#">Lorem Ipsum Dolor </a></h2>
				<p class="byline"><small>Posted on October 1st, 2009 by <a href="#">Free CSS Templates</a></small></p>
				<div class="entry">
					<p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. </p>
					<p class="links"><a href="#" class="more">&laquo;&laquo;&nbsp;&nbsp;Read More&nbsp;&nbsp;&raquo;&raquo;</a></p>
				</div>
			</div>
		</div>
		<!-- end content -->
		<!-- start sidebars -->
		<div id="sidebar2" class="sidebar">
			<ul>
				<li>
					<form id="searchform" method="get" action="#">
						<div>
							<h2>Site Search</h2>
							<input type="text" name="s" id="s" size="15" value="" />
						</div>
					</form>
				</li>
				<li>
					<h2>Tags</h2>
					<p class="tag"><a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a> <a href="#">dolor</a> <a href="#">ipsum</a> <a href="#">lorem</a> <a href="#">sit amet</a></p></li>
				<li>
					<h2>Calendar</h2>
					<div id="calendar_wrap">
						<table summary="Calendar">
							<caption>
							October 2009
							</caption>
							<thead>
								<tr>
									<th abbr="Monday" scope="col" title="Monday">M</th>
									<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
									<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
									<th abbr="Thursday" scope="col" title="Thursday">T</th>
									<th abbr="Friday" scope="col" title="Friday">F</th>
									<th abbr="Saturday" scope="col" title="Saturday">S</th>
									<th abbr="Sunday" scope="col" title="Sunday">S</th>
								</tr>
							</thead>
							<tfoot>
								<tr>
									<td abbr="September" colspan="3" id="prev"><a href="#" title="View posts for September 2009">&laquo; Sep</a></td>
									<td class="pad">&nbsp;</td>
									<td colspan="3" id="next">&nbsp;</td>
								</tr>
							</tfoot>
							<tbody>
								<tr>
									<td>1</td>
									<td>2</td>
									<td>3</td>
									<td id="today">4</td>
									<td>5</td>
									<td>6</td>
									<td>7</td>
								</tr>
								<tr>
									<td>8</td>
									<td>9</td>
									<td>10</td>
									<td>11</td>
									<td>12</td>
									<td>13</td>
									<td>14</td>
								</tr>
								<tr>
									<td>15</td>
									<td>16</td>
									<td>17</td>
									<td>18</td>
									<td>19</td>
									<td>20</td>
									<td>21</td>
								</tr>
								<tr>
									<td>22</td>
									<td>23</td>
									<td>24</td>
									<td>25</td>
									<td>26</td>
									<td>27</td>
									<td>28</td>
								</tr>
								<tr>
									<td>29</td>
									<td>30</td>
									<td>31</td>
									<td class="pad" colspan="4">&nbsp;</td>
								</tr>
							</tbody>
						</table>
					</div>
				</li>
				<li>
					<h2>Categories</h2>
					<ul>
						<li><a href="#">Aliquam libero</a></li>
						<li><a href="#">Consectetuer adipiscing elit</a></li>
						<li><a href="#">Metus aliquam pellentesque</a></li>
						<li><a href="#">Suspendisse iaculis mauris</a></li>
						<li><a href="#">Urnanet non molestie semper</a></li>
						<li><a href="#">Proin gravida orci porttitor</a></li>
						<li><a href="#">Aliquam libero</a></li>
						<li><a href="#">Consectetuer adipiscing elit</a></li>
						<li><a href="#">Metus aliquam pellentesque</a></li>
						<li><a href="#">Urnanet non molestie semper</a></li>
						<li><a href="#">Proin gravida orci porttitor</a></li>
						<li><a href="#">Aliquam libero</a></li>
						<li><a href="#">Consectetuer adipiscing elit</a></li>
						<li><a href="#">Metus aliquam pellentesque</a></li>
						<li><a href="#">Suspendisse iaculis mauris</a></li>
						<li><a href="#">Urnanet non molestie semper</a></li>
						<li><a href="#">Proin gravida orci porttitor</a></li>
						<li><a href="#">Metus aliquam pellentesque</a></li>
						<li><a href="#">Suspendisse iaculis mauris</a></li>
						<li><a href="#">Urnanet non molestie semper</a></li>
						<li><a href="#">Proin gravida orci porttitor</a></li>
						<li><a href="#">Metus aliquam pellentesque</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- end sidebars -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end page -->
</div>
<div id="footer">
	<p class="copy
Member Avatar for essential

Hi b0tz,

this script works fine with me and load the target location on the iframes' on a localhost, hope it'll do the same thing inside your browser and as well as with your server:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>www.daniweb.com</title>
</head>
<body id="body">
<!-- DO NOT REMOVE THIS COMMENT, UNLESS YOU HAVE OTHER NODES IN THE BODY DOCUMENT! -->
</body>
<script type="text/javascript">
<!--
( function() {
   var content;
   var isBody = document.getElementsByTagName("body")[ 0 ];
      if ( "createElement" in document ) {
      var isObject;
         if ( isObject = document.getElementById("newDiv")) { // this will prevent duplication of dynamic div.
            return false;
         } isObject = document.createElement( "div" );
      isObject.id = "newDiv";
      var cent = document.createElement("center"); 
      var iAttr = {
      allowtransparensy : true,
      align : "center",
      marginheight : 0,
      width : 900,
      scrolling : "no",
      frameborder : 0 };
      var iframe1 = document.createElement('iframe');
      var iframe2 = document.createElement('iframe');
      for ( var attr in iAttr ) {
         var i1attr = document.createAttribute( attr );
         var i2attr = document.createAttribute( attr );
         i1attr.nodeValue = iAttr[ attr ];
         i2attr.nodeValue = iAttr[ attr ];
         iframe1.setAttributeNode( i1attr ); 
           iframe2.setAttributeNode( i2attr ); 
      }
      iframe1.height = 18;
      iframe2.height = 96;
      cent.appendChild( iframe2 );
      cent.insertBefore( iframe1, iframe2 );
      isObject.appendChild( cent );
      isBody.insertBefore( isObject, isBody.firstChild );
      ( iframe1.src = iframe2.src = ( function() { // Change your desired URL from here >>>
         var url = "http://www.fnhost.org/test/index.html";
         var path = new Image()
         path = ( path.src = url );
         return path;
      } )( ));
   } 
} )( /* JavaScript 1.5 */ );
// -->
</script>
</html>
Member Avatar for b0tz

Hello,
On localhost is working, I will add it to the server. It will take about 15-30 minutes to update all the accounts.
I will keep you update, for now, thank you for your hard work.

Member Avatar for b0tz

Thank you , the script is working .
+rep

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.