Thiết kế website giá rẻ

Question

Trying to create a sandbox for simulating a bunch of html files, (some of which are nested within others in this format for example

function redirectToProcessor(event) {
            event.preventDefault();
            window.location.href = 'video-processor.html';
        }

But when using the html code below (the sandbox’s code), its only rendering one page and not redirecting when the right buttons are clicked. Tried everything, if someone can figure out what I am doing wrong that will be very helpful. The above code is part of the html files I tried to use with it, but it just isn’t working.

For it to be able to simulate htmls even with redirects, no redirects happening.

const fileList = document.getElementById('fileList');
const fileInput = document.getElementById('fileInput');
const tabs = document.getElementById('tabs');
const codeArea = document.getElementById('codeArea');
const previewFrame = document.getElementById('previewFrame');

let files = {};
let currentFile = null;

fileInput.addEventListener('change', (event) => {
  const newFiles = event.target.files;
  for (let file of newFiles) {
    const reader = new FileReader();
    reader.onload = (e) => {
      files[file.name] = e.target.result;
      updateFileList();
      createTab(file.name);
    };
    reader.readAsText(file);
  }
});

function updateFileList() {
  fileList.innerHTML = '';
  for (let fileName in files) {
    const li = document.createElement('li');
    li.textContent = fileName;
    li.onclick = () => openFile(fileName);
    fileList.appendChild(li);
  }
}

function createTab(fileName) {
  const tab = document.createElement('div');
  tab.className = 'tab';
  tab.textContent = fileName;
  tab.onclick = () => openFile(fileName);
  tabs.appendChild(tab);
}

function openFile(fileName) {
  currentFile = fileName;
  codeArea.value = files[fileName];
  updateTabs();
  updatePreview(fileName);
  history.pushState({
    file: fileName
  }, '', `#${fileName}`);
}

function updateTabs() {
  Array.from(tabs.children).forEach(tab => {
    tab.classList.toggle('active', tab.textContent === currentFile);
  });
}

function updatePreview(fileName) {
  const blob = new Blob([files[fileName]], {
    type: 'text/html'
  });
  const url = URL.createObjectURL(blob);
  previewFrame.src = url;
}

codeArea.addEventListener('input', () => {
  if (currentFile) {
    files[currentFile] = codeArea.value;
    updatePreview(currentFile);
  }
});

previewFrame.addEventListener('load', () => {
  const iframeWindow = previewFrame.contentWindow;
  iframeWindow.addEventListener('click', handleIframeClick);

  // Override the window.location object in the iframe
  Object.defineProperty(iframeWindow, 'location', {
    set: function(value) {
      if (typeof value === 'string') {
        navigateTo(value);
      } else if (value && typeof value.href === 'string') {
        navigateTo(value.href);
      }
    },
    get: function() {
      return {
        href: currentFile,
        assign: function(url) {
          navigateTo(url);
        },
        replace: function(url) {
          navigateTo(url);
        }
      };
    }
  });

  // Override history methods
  iframeWindow.history.pushState = function(state, title, url) {
    navigateTo(url);
  };
  iframeWindow.history.replaceState = function(state, title, url) {
    navigateTo(url);
  };
});

function handleIframeClick(event) {
  if (event.target.tagName === 'A') {
    event.preventDefault();
    const href = event.target.getAttribute('href');
    navigateTo(href);
  } else if (event.target.tagName === 'BUTTON' || event.target.tagName === 'INPUT') {
    const clickEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: previewFrame.contentWindow
    });
    event.target.dispatchEvent(clickEvent);
  }
}

function navigateTo(path) {
  // Handle relative paths
  if (!path.startsWith('/') && !path.startsWith('http')) {
    const currentDir = currentFile.split('/').slice(0, -1).join('/');
    path = `${currentDir}/${path}`;
  }

  // Normalize path
  path = path.replace(//.//g, '/').replace(//[^/]+/..//g, '/');

  if (files[path]) {
    openFile(path);
  } else if (path.startsWith('http')) {
    console.log(`External URL: ${path}`);
    // Handle external URLs as needed
  } else {
    console.error(`File not found: ${path}`);
  }
}

window.addEventListener('popstate', function(event) {
  if (event.state && event.state.file) {
    openFile(event.state.file);
  } else {
    const fileName = window.location.hash.slice(1);
    if (files[fileName]) {
      openFile(fileName);
    }
  }
});

// Initialize with index.html if it exists
if (files['index.html']) {
  openFile('index.html');
}

<div class="container">
  <div class="file-explorer">
    <h3>Files</h3>
    <ul id="fileList"></ul>
    <input type="file" id="fileInput" multiple>
  </div>
  <div class="editor">
    <div class="tabs" id="tabs"></div>
    <textarea class="code-area" id="codeArea"></textarea>
  </div>
  <iframe class="preview" id="previewFrame" src="about:blank"></iframe>
</div>

Thiết kế website giá rẻ

Danh mục

HTML redirects not working using this sandbox code