vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add enhance css for iframe

Browse Source
This commit is contained in:
Rohit
2025-06-30 21:10:06 +05:30
parent ae525894a4
commit 98770e3abc
1 changed files with 53 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/recorder/DOMBrowserRenderer.tsx
View File

@@ -670,8 +670,8 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
if (socket) { if (socket) {
socket.emit("dom:scroll", { socket.emit("dom:scroll", {
deltaX, deltaX,
deltaY deltaY,
}) });
} }
notifyLastAction("scroll"); notifyLastAction("scroll");
} }
@@ -790,34 +790,58 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
rebuiltHTML = "<!DOCTYPE html>\n" + rebuiltHTML; rebuiltHTML = "<!DOCTYPE html>\n" + rebuiltHTML;
const minimalCSS = ` const enhancedCSS = `
<style> /* rrweb rebuilt content styles */
/* Minimal styles - don't override too much */ html, body {
html, body { margin: 0 !important;
margin: 0; padding: 8px !important;
padding: 8px; overflow-x: hidden !important;
overflow-x: hidden; }
}
/* Hide scrollbars but keep functionality */ html::-webkit-scrollbar,
::-webkit-scrollbar { width: 0px; background: transparent; } body::-webkit-scrollbar {
body { scrollbar-width: none; -ms-overflow-style: none; } display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
/* Prevent form submissions and navigation */ /* Hide scrollbars for all elements */
form { pointer-events: none; } *::-webkit-scrollbar {
a[href] { pointer-events: ${isInCaptureMode ? "none" : "auto"}; } display: none !important;
</style> width: 0 !important;
height: 0 !important;
background: transparent !important;
}
* {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* Internet Explorer 10+ */
}
/* Make everything interactive */
* {
cursor: "pointer" !important;
}
`; `;
if (rebuiltHTML.includes("<head>")) { const headTagRegex = /<head[^>]*>/i;
const cssInjection = `
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="${snapshotData.baseUrl}">
<style>${enhancedCSS}</style>
`;
if (headTagRegex.test(rebuiltHTML)) {
rebuiltHTML = rebuiltHTML.replace( rebuiltHTML = rebuiltHTML.replace(
"<head>", headTagRegex,
`<head><base href="${snapshotData.baseUrl}">${minimalCSS}` `<head>${cssInjection}`
); );
} else if (rebuiltHTML.includes("<html>")) { } else {
rebuiltHTML = rebuiltHTML.replace( rebuiltHTML = rebuiltHTML.replace(
"<html>", /<html[^>]*>/i,
`<html><head><base href="${snapshotData.baseUrl}">${minimalCSS}</head>` `<html><head>${cssInjection}</head>`
); );
} }