iframe
通过此短代码,您可以将外部内容以内嵌框架(iframe)的形式嵌入到 Docsy 页面中。see: https://www.w3schools.com/tags/tag_iframe.asp
效果
如下是 gitea 的代码仓库
代码
{{< iframe src="https://gitea.cncfstack.com/google/docsy" class="iframe-container" >}}
| Parameter | Default | Description |
|---|---|---|
| src | URL of external content | |
| width | 100% | Width of iframe |
| tryautoheight | true | If true the shortcode tries to calculate the needed height for the embedded content using JavaScript, see details. This is only possible if the embedded content is on the same domain. Note that even if the embedded content is on the same domain, it depends on the structure of the content if the height can be calculated correctly. |
| style | min-height:98vh; border:none; | CSS styles for the iframe. min-height:98vh; is a backup if tryautoheight doesn’t work. border:none; removes the border from the iframe - this is useful if you want the embedded content to look more like internal content from your page. |
| sandbox | false | You can switch the sandbox completely on by setting sandbox = true or allow specific functionality with the common values for the iframe parameter sandbox defined in the HTML standard. |
| name | iframe-name | Specify the name of the iframe. |
| id | iframe-id | Sets the ID of the iframe. |
| class | Optional parameter to set the classes of the iframe. | |
| sub | Your browser cannot display embedded frames. You can access the embedded page via the following link: | The text displayed (in addition to the embedded URL) if the user’s browser can’t display embedded frames. |
Warning
You can only embed external
content from a server when its X-Frame-Options is not set or if it
specifically allows embedding for your site. See
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options for
details.
There are several tools you can use to check if a website can be embedded via iframe - e.g.: https://gf.dev/x-frame-options-test. Be aware that when this test says “Couldn’t find the X-Frame-Options header in the response headers.” you CAN embed it, but when the test says “Great! X-Frame-Options header was found in the HTTP response headers as highlighted below.”, you CANNOT - unless it has been explicitly enabled for your site.