Update README.md about iframing, detect iframe and work with it

README.md

@@ -52,7 +52,8 @@ This will only work through iframe or a cloned repo of the builder: Have a JavaS
 
 >## Intergretting into your website
 >You are free to use this in your website. Intergretting into your websites allows sending the embed to Discord with a few changes, and using 'formatters' eg. '{ server.name }' or '{ user.name }' etc. A (not so bad) downside would be that you'd probably have to keep up with fixes and updates.
-If all you want is to have an embed builder in your website with no additional features and maybe using your own bot name and avatar, etc., then you should iframe https://glitchii.github.io/embedbuilder into your website with a few of the parameters above if needed instead.
+<br>
+To over come that, and if all you want is to have an embed builder in your website with no additional features and maybe using your own bot name and avatar, etc., then you might iframe https://glitchii.github.io/embedbuilder into your website with a few of the parameters above if needed instead. The downside to this is that due to security reasons, browsers won't allow features like updating URL parameter to work through iframes, whoever URL options will still be read from the top holder of the iframe, those are probably the only features that won't work and thus are removed from the GUI menu when embeded in iframe.
 
 
 <br><br>

assets/css/index.css

@@ -38,11 +38,6 @@
     font-display: swap;
 }
 
-* {
-    outline: none;
-    box-sizing: border-box;
-}
-
 :root {
     --link: #00b0f4;
     --embedTextColor: #dcddde;
@@ -57,6 +52,15 @@
     --interactive-muted: #4f545c;
 }
 
+* {
+    outline: none;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+}
+
 body {
     line-height: 1;
     margin: 0px;

assets/js/script.js

@@ -3,8 +3,10 @@
 // If you found an issue, please report it, make a P.R, or use the discussion page. Thanks
 
 options = window.options || {};
+inIframe = window.inIframe || top !== self;
+currentURL = () => new URL(inIframe ? /(https?:\/\/(?:[\d\w]+\.)?[\d\w\.]+(?::\d+)?)/g.exec(document.referrer)[0] : location.href);
 
-var params = new URL(window.location.href).searchParams,
+var params = currentURL().searchParams,
     hasParam = param => params.get(param) !== null,
     dataSpecified = options.dataSpecified || params.get('data'),
     username = params.get('username') || options.username,
@@ -26,14 +28,14 @@ var params = new URL(window.location.href).searchParams,
         localStorage.removeItem(item);
         return found;
     },
-    jsonToBase64 = (jsonCode, withURL, redirect) => {
+    jsonToBase64 = (jsonCode, withURL = false, redirect = false) => {
         data = btoa(escape((JSON.stringify(typeof jsonCode === 'object' ? jsonCode : json))));
         if (withURL) {
-            let currentURL = new URL(window.location);
-            currentURL.searchParams.append('data', data);
-            if (redirect) window.location = currentURL;
+            const url = currentURL();
+            url.searchParams.append('data', data);
+            if (redirect) window.top.location.href = url;
             // Replace %3D ('=' url encoded) with '='
-            data = currentURL.href.replace(/data=\w+(?:%3D)+/g, 'data=' + data);
+            data = url.href.replace(/data=\w+(?:%3D)+/g, 'data=' + data);
         }
         return data;
     },
@@ -59,11 +61,17 @@ var params = new URL(window.location.href).searchParams,
         if (autoParams) isReversed ? urlOptions({ set: ['reverse', ''] }) : urlOptions({ remove: 'reverse' });
     },
     urlOptions = ({ remove, set }) => {
-        const url = new URL(window.location.href);
+        const url = currentURL(), href = url.href.replace(/=&|=$/g, x => x === '=' ? '' : '&');
         if (remove) url.searchParams.delete(remove);
         if (set) url.searchParams.set(set[0], set[1]);
-        // history.replaceState(null, null, url.href);
-        history.replaceState(null, null, url.href.replace(/=&|=$/g, x => x === '=' ? '' : '&'));
+        try {
+            history.replaceState(null, null, href);
+        } catch (e) {
+            // Most likely embeded in iframe
+            console.message(`${e.name}: ${e.message}`, e);
+            // if (e.name === 'SecurityError')
+            //     window.top.location.href = href;
+        }
     },
     mainKeys = ["author", "footer", "color", "thumbnail", "image", "fields", "title", "description", "url", "timestamp"],
     jsonKeys = ["embed", "content", ...mainKeys],
@@ -151,6 +159,11 @@ addEventListener('DOMContentLoaded', () => {
         document.body.classList.add('autoUpdateURL');
     if (autoParams)
         document.querySelector('.auto-params > input').checked = true;
+    if (inIframe)
+        // Remove menu options that that don't work in iframe.
+        for (const e of document.querySelectorAll('.top-btn.menu :is(.item.auto, .item.auto-params, .vs.auto-url)'))
+            e.remove();
+
     document.querySelectorAll('.clickable > img')
         .forEach(e => e.parentElement.addEventListener('mouseup', el => window.open(el.target.src)));
 
@@ -822,7 +835,8 @@ addEventListener('DOMContentLoaded', () => {
             if (autoUpdateURL)
                 urlOptions({ set: ['data', jsonToBase64(json)] })
         } catch (e) {
-            console.log(e);
+            console.error(e);
+            console.dir(e);
             error(e);
         }
     }
@@ -965,8 +979,6 @@ addEventListener('DOMContentLoaded', () => {
             if (input.checked) localStorage.setItem('autoParams', true);
             else localStorage.removeItem('autoParams');
             autoParams = input.checked;
-
-            console.log(input?.checked, e.target.closest('.item.auto-params'))
         }
         e.target.closest('.top-btn').classList.toggle('active')
     })
@@ -1032,3 +1044,9 @@ addEventListener('DOMContentLoaded', () => {
         }
     });
 });
+
+console.__proto__.message = function (title, message, collapse = true) {
+    collapse && this.groupCollapsed(title) || this.group(title);
+    this.dir(message);
+    this.groupEnd();
+}

index.html

@@ -158,7 +158,7 @@
                                 </div>
                                 <div>Hide username and avatar</div>
                             </div>
-                            <div class="vs"></div>
+                            <div class="vs auto-url"></div>
                             <div class="item auto-params">
                                 <input id="auto" name="auto" autocomplete="off" type="checkbox">
                                 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 512 512" xml:space="preserve" width="16" height="16" fill="currentColor" style="display: none;">