如何用Iframe将C#应用嵌入WordPress网站？求通俗讲解

先搞懂什么是IFrame #

简单说，IFrame就是在你的WordPress页面里开一个“专属小窗口”，这个窗口会直接加载并显示另一个独立网页的内容——也就是你部署好的C#应用。就像你在杂志里插了个小板块，读者不用翻页就能看到另一篇完整的内容。

第一步：先把你的C#应用变成可访问的网页 #

你得先把写好的C#应用（不管是Blazor、ASP.NET MVC还是其他类型）部署到服务器上，拿到一个公开可访问的URL，比如https://my-csharp-app.example.com。这是前提，不然IFrame没东西可加载。

第二步：在WordPress里嵌入IFrame的两种常用方法 #

方法1：用古腾堡编辑器的自定义HTML区块

• 打开WordPress后台，新建或编辑你要嵌入应用的页面/文章
• 点击顶部的“+”号，搜索并添加「自定义HTML」区块
• 在区块里粘贴下面的代码，把src里的地址换成你的C#应用的URL：

<iframe src="https://你的C#应用URL" width="100%" height="800px" frameborder="0" allowfullscreen></iframe>

• 关键参数说明：
  • width="100%"：让小窗口铺满WordPress页面宽度，也可以写固定数值比如800px
  • height="800px"：设置窗口高度，根据你的应用内容多少调整
  • frameborder="0"：去掉窗口周围的边框，视觉上更自然
  • allowfullscreen：如果你的应用支持全屏，加上这个用户就能点击全屏查看

方法2：用经典编辑器的文本模式

• 打开页面/文章编辑页，切换到「文本」标签（别在「可视化」模式粘贴）
• 直接粘贴上面的IFrame代码，替换URL后保存即可

避坑提醒 #

• 要是嵌入后显示空白，大概率是你的C#应用服务器禁止了IFrame嵌入。这时候需要在C#应用的服务器配置里调整，比如在ASP.NET项目中添加响应头，允许你的WordPress域名嵌入
• 一定要预览页面测试，确认应用能正常点击、交互，别只看编辑模式的显示效果
• 如果应用内容支持自适应，建议width用百分比，适配不同设备的屏幕

内容的提问来源于stack exchange，提问作者ImperialApplications