HTML Snippet - IFRAME Viewer

Posted at

This is a "transparent page" with no other reason to exist, other than showing another page.
May used instead of redirection to new page (301/302/location refreshing/etc..).
also, this trick is useful instead of maintaining a clone of the (same) resources on another domain.

naturally the top window is isolated from the main content.

This example can be viewed by viewing umoji.eladkarako.com

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" dir="ltr" lang="en-US" language="English" charset="UTF-8" encoding="UTF-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,minimal-ui"/>
<meta name="robots" content="index,follow,snippet,archive,odp,translate,imageindex">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<meta name="description" content="Unicode Emoji - Easy Copy, No Squares (Only Valid Images for Courier New), No Bull$hit.">
<meta name="keywords" content="Unicode,Emoji,https://eladkarako.github.io/umoji/,eladkarako.github.io/umoji">
<title>U(nicode E)moji</title>
<style type="text/css" media="all">
/*<![CDATA[*/
@charset "UTF-8";
@namespace "http://www.w3.org/1999/xhtml";
html,body,iframe{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
text-size-adjust: 100%;
overflow: hidden;
}
/*]]>*/
</style>
</head>
<body><iframe allowfullscreen="true" frameborder="0" marginheight="0" marginwidth="0" referrerpolicy="unsafe-url" scrolling="yes" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation" seamless="false" target="" src="https://eladkarako.github.io/umoji/"></iframe></body>
</html>


notice that keywords, title and icon (and the favicon.ico itself in the same folder) resources are still required although the iframe includes same ones, due to the iframe isolation (only top window can control those resources..)

the real page available at eladkarako.github.io/umoji

optionally add <base target="_top"/> to the HEAD of the internal-page (click on a link will open it in the top window, replacing it all to another page), or
set to to _self to keep the top most address the same (umoji.eladkarako.com) and the links will be opened in the iframe itself (sort of "hidden" address :] )