Skip to main content
Internet Explorer is a fully functional web browser component that allows users to navigate websites through an embedded iframe.

​
Features

  • URL Navigation: Address bar with URL input and Go button
  • History Management: Back/Forward buttons with history stack
  • Toolbar Controls: Home, Refresh, Stop, Search, Favorites
  • Error Handling: Custom error page for blocked/failed loads
  • Loading States: Timeout detection for stuck iframes
  • XP-Authentic UI: Classic Windows XP styling and layout

​
Component Structure

Location: src/WinXP/apps/InternetExplorer/index.jsx 
function InternetExplorer({ onClose }) {
  const [currentUrl, setCurrentUrl] = useState(DEFAULT_HOME_PAGE);
  const [historyStack, setHistoryStack] = useState([DEFAULT_HOME_PAGE]);
  const [historyIndex, setHistoryIndex] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const [showCustomErrorPage, setShowCustomErrorPage] = useState(false);
  
  // Navigation, iframe handling, etc.
}

​
Configuration

From apps/index.jsx: 
'Internet Explorer': {
  name: 'Internet Explorer',
  header: { icon: iePaper, title: 'InternetExplorer' },
  component: InternetExplorer,
  defaultSize: { width: 700, height: 500 },
  defaultOffset: getCenter(700, 500),
  resizable: true,
  minimized: false,
  maximized: shouldMaximize(700, 500, true),
  multiInstance: true, // Can open multiple windows
}
From dropDownData.js:

​
File Menu

  • New (Window, Message, Post, Contact, Internet Call)
  • Open, Save, Save As
  • Page Setup, Print, Print Preview
  • Send (Page/Link by Email, Shortcut to Desktop)
  • Import/Export
  • Properties, Work Offline
  • Close (functional)

​
Edit Menu

  • Cut, Copy, Paste
  • Select All
  • Find (on This Page)

​
View Menu

  • Toolbars (Standard Buttons, Address Bar, Links)
  • Status Bar
  • Explorer Bar (Search, Favorites, History, Folders)
  • Go to submenu with Back, Forward, Home Page (functional)
  • Stop (functional)
  • Refresh (functional)
  • Text Size, Encoding
  • Source, Privacy Report, Full Screen

​
Favorites Menu

  • Add to Favorites
  • Organize Favorites
  • Links folder with bookmarks

​
Tools Menu

  • Mail and News
  • Pop-up Blocker
  • Manage Add-ons
  • Synchronize, Windows Update
  • Windows Messenger
  • Internet Options

​
Help Menu

  • Contents and Index
  • Tip of the Day
  • For Netscape Users
  • Online Support, Send Feedback
  • About Internet Explorer
// Navigate to URL
const navigateToUrl = (url, addToHistory = true) => {
  setIsLoading(true);
  setShowCustomErrorPage(false);
  
  let finalUrl = url.trim();
  if (!/^https?:\/\//i.test(finalUrl) && !finalUrl.startsWith('about:')) {
    finalUrl = `http://${finalUrl}`;
  }
  
  // Set timeout for blocked iframes
  loadTimeoutRef.current = setTimeout(() => {
    setIsLoading(false);
    setShowCustomErrorPage(true);
  }, IFRAME_LOAD_TIMEOUT);
  
  setCurrentUrl(finalUrl);
  if (addToHistory) {
    // Add to history stack
  }
};

// Back button
const goBack = () => {
  if (historyIndex > 0) {
    const newIndex = historyIndex - 1;
    setHistoryIndex(newIndex);
    navigateToUrl(historyStack[newIndex], false);
  }
};

// Forward button
const goForward = () => {
  if (historyIndex < historyStack.length - 1) {
    const newIndex = historyIndex + 1;
    setHistoryIndex(newIndex);
    navigateToUrl(historyStack[newIndex], false);
  }
};

​
Error Handling

Internet Explorer displays a custom error page when:
  • Website blocks iframe embedding (X-Frame-Options)
  • Load timeout exceeds 60 seconds
  • Network connection issues
  • Invalid URLs
{showCustomErrorPage ? (
  <IframeErrorDiv>
    <h3>Navigation Canceled</h3>
    <p>The website could not be displayed in the application.</p>
    <ul>
      <li>Website does not allow iframe embedding (X-Frame-Options)</li>
      <li>Address is incorrect or temporarily unavailable</li>
      <li>Network connection issue occurred</li>
    </ul>
  </IframeErrorDiv>
) : (
  <iframe
    src={currentUrl}
    sandbox="allow-forms allow-modals allow-scripts..."
    onLoad={handleIframeLoad}
  />
)}

​
Toolbar Buttons

  • Back/Forward: Navigate history (disabled when at edges)
  • Stop: Stops iframe loading
  • Refresh: Reloads current page
  • Home: Returns to default homepage (Google)
  • Search: Search functionality
  • Favorites: Bookmarks menu
  • History: Recently visited pages
  • Mail: Email integration
  • Print: Print current page

​
Usage Example

import { InternetExplorer } from 'src/WinXP/apps';

function Desktop() {
  return (
    <Window title="Internet Explorer">
      <InternetExplorer onClose={handleClose} />
    </Window>
  );
}

​
Styling

The component uses styled-components with classic XP gradients: 
background: linear-gradient(to right, #edede5 0%, #ede8cd 100%);
Button states include hover effects and active press animations: 
.ie__function_bar__button {
  &:hover {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1);
  }
  &:hover:active {
    background-color: #dedede;
    & > * {
      transform: translate(1px, 1px);
    }
  }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us