engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: convert ALL relative URLs to absolute in translated pages

Browse source 
- Convert CSS links, script sources, image sources, and navigation links
- Use current page URL as base for proper relative URL resolution
- Skip data: URLs, fragments, and protocol-relative URLs
- Ensure all assets load properly in new window context
This commit is contained in:
Russell Ballestrini 2025-07-09 16:26:24 -04:00
parent ba7885afe6
commit 275f9e02fa
1 changed files with 41 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/translation.js
View file

@ -378,22 +378,52 @@ export async function translateCurrentPage(targetLanguage) {
// Replace the body content with translated content
doc.body.innerHTML = translatedContent;
// Convert relative CSS URLs to absolute URLs so they work in new window
const cssLinks = doc.querySelectorAll('link[rel="stylesheet"]');
// Convert ALL relative URLs to absolute URLs so they work in new window
const currentOrigin = window.location.origin;
const currentUrl = window.location.href;
// Convert CSS links
const cssLinks = doc.querySelectorAll('link[rel="stylesheet"]');
cssLinks.forEach(link => {
const href = link.getAttribute('href');
// Skip if already absolute URL
if (href.startsWith('http') || href.startsWith('//')) {
return;
if (href && !href.startsWith('http') && !href.startsWith('//')) {
const absoluteUrl = new URL(href, currentUrl).href;
link.setAttribute('href', absoluteUrl);
console.log('Converted CSS URL:', href, '->', absoluteUrl);
}
});
// Convert script sources
const scripts = doc.querySelectorAll('script[src]');
scripts.forEach(script => {
const src = script.getAttribute('src');
if (src && !src.startsWith('http') && !src.startsWith('//')) {
const absoluteUrl = new URL(src, currentUrl).href;
script.setAttribute('src', absoluteUrl);
console.log('Converted script URL:', src, '->', absoluteUrl);
}
});
// Convert image sources
const images = doc.querySelectorAll('img[src]');
images.forEach(img => {
const src = img.getAttribute('src');
if (src && !src.startsWith('http') && !src.startsWith('//') && !src.startsWith('data:')) {
const absoluteUrl = new URL(src, currentUrl).href;
img.setAttribute('src', absoluteUrl);
console.log('Converted image URL:', src, '->', absoluteUrl);
}
});
// Convert link hrefs (for navigation)
const links = doc.querySelectorAll('a[href]');
links.forEach(link => {
const href = link.getAttribute('href');
if (href && !href.startsWith('http') && !href.startsWith('//') && !href.startsWith('#') && !href.startsWith('mailto:') && !href.startsWith('tel:')) {
const absoluteUrl = new URL(href, currentUrl).href;
link.setAttribute('href', absoluteUrl);
console.log('Converted link URL:', href, '->', absoluteUrl);
}
// Convert relative URL to absolute
const absoluteUrl = new URL(href, currentOrigin).href;
link.setAttribute('href', absoluteUrl);
console.log('Converted CSS URL:', href, '->', absoluteUrl);
});
return doc.documentElement.outerHTML;