In this brief article I explain the atrocity that is UserCash and then provide the JavaScript needed to protect your site.

What is UserCash?

UserCash is an online advertising program that uses redirects and frames to exploit your site with advertisements. UserCash customers link to target sites using rewritten URL’s generated via the UserCash “generator/compiler.” There are two types of these rewritten UserCash links:

• Links that use frames to create banner-like ads above your pages
• Links that use frames to deploy landing-page ads before your pages

Continue Reading

By using an <iframe> within a <div>, it is possible to include external web content in most any web document. This method serves as an excellent alternative to actual frames, which are not as flexible and definitely not as popular. Indeed, with CSS, the placement, sizing, and styling of div’s provides endless possibilities for embedding external or even internal web content into pages that would otherwise require the use of frames, Flash, or JavaScript. This method works on any modern browser, as well as any old browser that understands both <div> and <iframe> tags. Simply add the following code to your document and style according to your specific needs:

<div style="position:absolute; left:77; top:77; width:377; height:377; clip:rect(0,381,381,0); background:#FFF;">

 <iframe src="http://www.google.com/" width="377" height="377" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border-width:2px; border-color:#333; background:#FFF; border-style:solid;">
 </iframe>

</div>

Here is the code again, this time commented with explanatory information:

Continue Reading

Welcome to Perishable Press! This article explains several methods for opening multiple frames with a single link. For more excellent (X)HTML information, check out the (X)HTML tag archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;)

Opening Multiple Frames with One Link

Method 1:

The first method of targeting multiple frames involves replacing either the entire frameset (via target="_top") or a subset of frames (via target="subset"). For example, any number of frames may be updated with a single link if that link targets a new frameset containing all of the new frames. Likewise, multiple frames within a nested frameset may be updated by replacing the nested frameset itself. This method works well when many frames need updating. In the following example, the nested frameset, "nested-frameset.html", contains multiple frames that need updating when a single link is clicked. When this happens, the "dynamic" frame is refreshed with multiple new frames, while the "static" frame remains constant. Using this method, virtually any combination of frames or framesets may be updated with a single link.

<frameset cols="*,3*">
   <frame src="static-content.html" name="static">
   <frame src="nested-frameset.html" name="dynamic">
</frameset>

Method 2:

The second method for targeting multiple frames employs JavaScript’s "onClick" function. With this method, the initial frame (or frameset) is updated via the link’s href attribute, while the additional frame(s)/frameset(s) is updated via the link’s onClick attribute. This method requires JavaScript, but is much less convoluted than the method previously discussed. In the following example, when the link is activated, "first-frame" will be updated with first-frame.html, while "second-frame" will be updated with second-frame.html:

<a href="/path/first-frame.html" 
 target="first-frame" title="Update frames" 
 onClick="top.second-frame.location='/path/second-frame.html';">
   Click here to update both frames.
</a>

Method 3:

Our third method of opening/updating multiple frames with a single click utilizes a simple JavaScript function. This method operates through a function call placed in either the href or onclick attribute of the anchor (<a>) element. Upon activation, the JavaScript function proceeds to open simultaneously the specified links. Implementing this technique is straightforward. Given the following frameset:

<html>
 <head>
  <title>The Frameset</title>
 </head>
 <frameset cols="50%,50%">
  <frame src="page-01.html" name="frame-one" />
  <frame src="page-02.html" name="frame-two" />
 </frameset>
</html>

…with the following code present in page-01.html, which is displayed as frame-one:

<html>
 <head>
  <title>Frame One</title>
  <script type="text/javascript">
   <!--//--><![CDATA[//><!--
    function openframes() {
       parent.frame-one.location="page-03.html";
       parent.frame-two.location="page-04.html";
    }
   //--><!]]>
  </script>
 </head>
 <body>
  <p>
   <a href="javascript:openframes();" title="Open two links..">
    Open "page-03.html" into "frame-one" and "page-04.html" into "frame-two"
   </a>
  </p>
 </body>
</html>

With the previous code in place, the broswer window will display two frames of equal width. In the left frame, there will be a link that, when clicked, will open two links at the same time. Specifically, when the link is clicked, a file named “page-03.html” will replace the contents of the left frame (”frame-one.html”) while a file named “page-04.html” will replace the contents of the right frame (”frame-two.html”). To setup additional frames to open/update upon link click, simply add the corresponding lines to the openframes() function by emulating the existing code pattern. For example, to add another three frames to the function:

function openframes() {
   parent.frame-one.location="page-03.html";
   parent.frame-two.location="page-04.html";
   parent.frame-thr.location="page-05.html";
   parent.frame-for.location="page-06.html";
   parent.frame-fiv.location="page-07.html";
}

Finally, to account for users without JavaScript, we could call the function via onclick attribute, include an alternate frameset or page via the href attribute, and throw in a return false declaration for good measure:

<a href="../no-javascript.html" onclick="javascript:openframes();return false;">
   Open "page-03.html" into "frame-one" and "page-04.html" into "frame-two"
</a>

Beyond frames..

Using the onClick attribute within links, it is possible to target more than just frames. For example, Monzilla’s Information theme for WordPress features subpanels that "pop" open to reveal various types of content. To improve usability, we wanted certain panel links to open their panels while simultaneously repositioning the top of the panel with the top of the browser. This was easily accomplished with an onClick attribute in each of the panel links¹.

References

• ¹ To check out the "popping" subpanels used in the Information theme, click here, scroll down near the bottom of the page, and click on either the "nonsense" or "details +" tabs. The single link click should result in two events happening simultaneously: the subpanel will pop open and the subpanel will align its top edge with the top of the browser window.

If you think that nobody uses frames anymore, think again. I personally know of one person who threw down some tuf HTML frame action for a personal site. So, in the interest of prosperity, we are hereby establishing this post as our official dumping ground for all HTML frame-related garbage.

Break your pages out of someone else’s frames

We begin our journey with a totally sick JavaScript method for breaking pages out of the illegitimate frames of some ineffectually pathetic bastard:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

   if (window.self ! = window.top) window.top.location = window.self.location;

//--><!]]>
</script>

Likewise, here is an equally effective method that should work in all JS-enabled browsers:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if (window.frames) {
   if (parent != self) {
   location.href="index.html"
   }
}

//--><!]]>
</script>

Alternatively, this method also works well in all non-NN browsers:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if (parent.frames.length > 0) {
   parent.location.href = location.href;
}

//--><!]]>
</script>

Here is a similar version of the previous method:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if (parent.frames.length > 0) top.location.replace(document.location);

//--><!]]>
</script>

Here is yet another slightly similar version:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if (top.frames.length > 0) {
   top.location = self.location;
}

//--><!]]>
</script>

Yet another fine method for breaking out of frames:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if ( top.location != document.location.href ) { 
   top.location = document.location.href; 
}

//--><!]]>
</script>

Here is the script we use for Monzilla Media (monzilla.biz):

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if ( self.location.href != top.location.href ) {
   top.location.href = self.location.href;
}

//--><!]]>
</script>

This method stops recursively framed pages:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if ( window != top ) 
   top.location.href = window.location.href;

//--><!]]>
</script>

This method works great at breaking out and redirecting the browser to the original page:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

var parent_location = new String(parent.location);
   if ( ( top.location != location ) && parent_location.indexOf('http://domain.tld/path/to/page.html') != 0 )
   top.location.href = document.location.href;

//--><!]]>
</script>

Optimize the content of an iframe

Moving right along, here is a helpful method for optimizing the content of an iframe. This code basically displays a link to the content that should be displayed if everything is working correctly. If for some reason the content is not displayed, the link will appear in its place, thereby enabling users to access the missing content via a new window:

<iframe src="page.html" width="333" height="333" scrolling="auto" frameborder="1">
   <a href="page.html" target="_blank">
      [Your browser does not support frames or is configured not to display frames. Click here to visit the related document.]
   </a>
</iframe>

Control frameborder and scroll attributes for iframes via CSS

To control the frameborder=”value” and scroll=”yes/no” attributes for iframes using CSS, add the following styles to the document which is being displayed in the iframe:

<style type="text/css">
html, body {
   overflow: hidden;
   border: none;
}
</style>

This method works on all IE 4+ with the following exceptions:

IE 4

• Ignores overflow on html and body elements (i.e., no scrollbar elimination in IE 4)
• Border property must be applied to the body element

IE 5 and IE 5.5

• Overflow property must be applied to the body element
• Border property may be applied to either the html or the body element

IE 6 / Quirks Mode (Transitional DTD)

• Overflow property must be applied to the body element
• Border property may be applied to either the html or the body element

IE 6 / Standards Mode (Transitional DTD)

• Overflow property must be applied to the html element
• Border property must be applied to the html element