I have an iframe to which I pass html, css and js content with the srcdoc property and now I would like to log all errors such as syntax etc. I don't need to know if it's syntax or not, I just know if it's error or warning.
I've tried redefining the console.log, console.warn and console.error functions and it works when called explicitly, but not if it's a problem with javascript.
You have to get the iframe's window using document.querySelector("iframe").contentWindow.
<iframe srcdoc="<script>unassignedFunc()</script>"></iframe>
<script>
// Get the iframe's window then attach an error handler to the iframe's onerror event
document.querySelector("iframe").contentWindow.onerror = function(message) {
// Display error message
alert(message);
}
</script>
You can also do a check for other console methods like console.log:
<iframe srcdoc='<script>console.log("I am from the iframe");</script>'></iframe>
<script>
// Get the iframe's window then manipulate the iframe's console.log
document.querySelector("iframe").contentWindow.console.log = function() {
// Display all recurring console.log()
alert(Array.from(arguments));
}
</script>
This should work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframes</title>
<script>
// Define the error handler function
function handleIframeError(message, source, lineno, colno, error) {
// Log the error information
console.error('Iframe Error:', message, source, lineno, colno, error);
}
</script>
</head>
<body>
<iframe defer
title="testFrame"
srcdoc="
<script>console.log('Hello world!');</script>
<p>Hello world!</p>">
</iframe>
<script>
// Attach the error handler to the window.onerror event
window.onerror = handleIframeError;
</script>
</body>
</html>
