fix DOMException when trying to use XR inside an iFrame, show "VR NOT ALLOWED" / "AR NOT ALLOWED" instead and align VR/AR code (#23174)

examples/jsm/webxr/ARButton.js

@@ -133,6 +133,16 @@ class ARButton {
 
 		}
 
+		function showARNotAllowed( exception ) {
+
+			disableButton();
+
+			console.warn( 'Exception when trying to call xr.isSessionSupported', exception );
+
+			button.textContent = 'AR NOT ALLOWED';
+
+		}
+
 		function stylizeElement( element ) {
 
 			element.style.position = 'absolute';
@@ -161,7 +171,7 @@ class ARButton {
 
 				supported ? showStartAR() : showARNotSupported();
 
-			} ).catch( showARNotSupported );
+			} ).catch( showARNotAllowed );
 
 			return button;
 

examples/jsm/webxr/VRButton.js

@@ -104,6 +104,16 @@ class VRButton {
 
 		}
 
+		function showVRNotAllowed( exception ) {
+
+			disableButton();
+
+			console.warn( 'Exception when trying to call xr.isSessionSupported', exception );
+
+			button.textContent = 'VR NOT ALLOWED';
+
+		}
+
 		function stylizeElement( element ) {
 
 			element.style.position = 'absolute';
@@ -138,7 +148,7 @@ class VRButton {
 
 				}
 
-			} );
+			} ).catch( showVRNotAllowed );
 
 			return button;