From 1db709b94a7a8fe4a6725a5a7960bc66e08014fa Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Mon, 30 Oct 2023 11:43:38 -0700 Subject: [PATCH] Simplify iframe docs --- docs/widgets/services/iframe.md | 41 ++++++++++++++------------------- 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/docs/widgets/services/iframe.md b/docs/widgets/services/iframe.md index 11eca395..97f1085e 100644 --- a/docs/widgets/services/iframe.md +++ b/docs/widgets/services/iframe.md @@ -3,13 +3,19 @@ title: iFrame Description: Add a custom iFrame Widget --- +A basic iFrame widget to show external content, see the [MDN docs](ttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) for more details about some of the options. + +!!! warning + + Requests made via the iFrame widget are inherently **not proxied** as they are made from the browser itself. + ## Basic Example ```yaml widget: type: iframe - name: myIframe # string - required - Also helps if you would like to target the iframe with a button - src: "http://example.com" # string - required - URL of the content to load within the iFrame + name: myIframe + src: "http://example.com" ``` ## Full Example @@ -17,27 +23,14 @@ widget: ```yaml widget: type: iframe - name: myIframe # string - required - Also helps if you would like to target the iframe with a button - src: "http://example.com" # string - required - URL of the content to load within the iFrame - sizes: { "xs": "60", "sm": "60", "md": "80", "lg": "80", "xl": "80", "2xl": "80" } # optional - Controls the height of the iframe (width is always 100%) The value for each breakpoint size must map directly to a field in the Tailwind Height CSS classes + name: myIframe + src: "http://example.com" + sizes: { "xs": "60", "sm": "60", "md": "80", "lg": "80", "xl": "80", "2xl": "80" } # optional - sets height of the iframe. The value for each breakpoint size must map directly to a field in the Tailwind Height CSS classes, see https://tailwindcss.com/docs/height referrerPolicy: "same-origin" # string - optional - no default - allowPolicy: "autoplay fullscreen gamepad" # string - optional - no default - Control the permissions for the iFrame content - allowFullscreen: false # boolean - optional - default: true - Controls whether you can interact with a fullscreen button from within the iframe content and have the content expand into fullscreen - loadingStrategy: "eager" # string - optional - default: "eager" - Make the iframe lazy load - allowScrolling: "no" # string - optional - default: "yes" - Will disable scrolling and visible scrollbars. Deprecated, but still implemented by major browsers (for now) - border: 0 # number - optional - default: 1 - Will remove the small border present on some browsers. Deprecated, but still implemented by major browsers (for now) - refreshInterval: 2000 # number - optional - no default - This will refresh the iframe on an interval + allowPolicy: "autoplay fullscreen gamepad" # optional, no default + allowFullscreen: false # optional, default: true + loadingStrategy: "eager" # optional, default: "eager" + allowScrolling: "no" # optional, default: "yes" + border: 0 # optional, default: 1 + refreshInterval: 2000 # optional, no default ``` - -### Available Sizes - -[Tailwind Docs](https://tailwindcss.com/docs/height) - -### References - -[referrerPolicy MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
-[allowFullscreen MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allowfullscreen)
-[loading MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#loading)
-[scrolling MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#scrolling)
-[border MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#frameborder)
-[allowPolicy MSDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy)