Create JavaScript code to open an image URL in a new window
function openImageInNewWindow(imageUrl, width = 800, height = 600) {
// Window features
const features = `width=${width},height=${height},resizable=yes,scrollbars=yes,status=yes`;
// Open the window with specific dimensions
window.open(imageUrl, '_blank', features);
}
// Example usage:
// openImageInNewWindow('path/to/your/image.jpg', 400, 500);Để thêm kiểm soát và xử lý lỗi, sau đây là phiên bản nâng cao:
function openImageInNewWindow(imageUrl, width = 800, height = 600) {
if (!imageUrl) {
console.error('Image URL is required');
return;
}
// Window features
const features = [
`width=${width}`,
`height=${height}`,
'resizable=yes',
'scrollbars=yes',
'status=yes',
'toolbar=no',
'menubar=no',
'location=no'
].join(',');
// Open the window
const newWindow = window.open('', '_blank', features);
if (newWindow) {
// Create HTML content for the new window
newWindow.document.write(`
<html>
<head>
<title>Image Viewer</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
img {
max-width: 100%;
max-height: 100vh;
object-fit: contain;
}
</style>
</head>
<body>
<img src="${imageUrl}" alt="Image" onerror="alert('Failed to load image');">
</body>
</html>
`);
newWindow.document.close();
} else {
alert('Pop-up window was blocked. Please allow pop-ups for this site.');
}
}
// Basic usage
// openImageInNewWindow('path/to/your/image.jpg');
// With custom dimensions
// openImageInNewWindow('path/to/your/image.jpg', 400, 500);Hãy nhớ rằng một số trình duyệt có thể chặn cửa sổ bật lên theo mặc định, do đó, cách tốt nhất là thông báo cho người dùng nếu cửa sổ bật lên bị chặn và yêu cầu họ cho phép cửa sổ bật lên trên trang web của bạn.
Ngoài ra, hãy đảm bảo URL hình ảnh có cùng nguồn gốc với trang web của bạn hoặc máy chủ lưu trữ hình ảnh có tiêu đề CORS thích hợp được thiết lập để cho phép các yêu cầu có nguồn gốc chéo.