在网页中直接引入其它网页的方法探索（失败案例）

最新推荐文章于 2024-05-19 09:51:10 发布

Dickence

最新推荐文章于 2024-05-19 09:51:10 发布

阅读量1.8k

点赞数

分类专栏：技术文章标签： iframe microsoft teams

本文链接：https://blog.csdn.net/dickence/article/details/121428975

版权

技术专栏收录该内容

38 篇文章

订阅专栏

本文尝试将Microsoft Teams的直播页面嵌入到自定义系统中，通过iframe进行加载时遇到了跨域问题。经过一系列尝试发现无法直接加载Teams页面，文中详细记录了整个调试过程及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、用户需求描述

用户需要通过Microsoft Teams开一个会议，希望把Teams的直播页面引入到系统中。

二、解决方案

1、可以通过iframe加载teams的直播页面；

2、在加载前，通过参数把实际会议室编号转入iframe的src属性即可。

三、开始实施

看起来问题很简单，着手开始做。

先写一个test.html，里面直接编写一个iframe引入会议，做个试验。

<html>
    <head>
    </head>
    <body>
        <label>microsoft teams</label>
        <div>
            <iframe src="https://teams.live.com/meet/<<your-meeting-id>>"></iframe>
        </div>

        <label>my website</label>
        <div>
            <iframe src="http://192.168.1.100:1000/">        
            </iframe>
        </div>

        <label>end of the page</label>
    </body>
</html>

结果，起手遇到第一个问题。

3.1 第一个问题（基本不使用iframe，经验问题）

两个iframe，分别加载了microsoft teams的会议直播页面和我自己的一个测试网站。

结果，自己的测试网站加载成功，teams的加载失败，失败原因是『拒绝响应』。

查了一下，是在http网站中，不可以使用https服务。

好，那就直接上https的页面中测试。结果又遇到了第二个问题。。。

3.2 第二个问题

先说一下使用HTTPS加载后的现象，使用HTTPS加载上述页面时，teams加载失败，自己的网站也加载失败。

先解决自己网站的问题。这个问题是原因是，https页面通过iframe加载http的页面，也会报错。于是，替换成一个自己的https页面，测试成功。

但teams还是加载失败。

查看了无数资料，查到有这样一个设置：X-Frame-Options，这项有两个值：DENY和SAMEORIGINE

这个值不可以使用<meta...来设置

需要使用Nginx或IIS等工具来设置：

# nginx

add_header X-Frame-Options SAMEORIGIN always;

<-- IIS -->
<system.webServer>
  ...

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>

  ...
</system.webServer>

具体可以参考这里。

结论就是，没有办法直接引入。

各位高人，如果有什么好的办法可以解决这个问题，请不吝赐教。