iframe不同域名不同服务器取值
基础概念
<iframe> 是 HTML 中的一个标签，用于在网页中嵌入另一个 HTML 文档。它可以加载不同域名和服务器上的内容。
相关优势
- 内容隔离：
<iframe>可以将嵌入的内容与主页面隔离开来，避免样式和脚本冲突。 - 代码复用：可以在多个页面中嵌入同一个
<iframe>，从而复用代码。 - 安全性：通过
<iframe>可以加载来自不同域名的内容，但默认情况下，浏览器会阻止跨域脚本访问。
类型
- 匿名 iframe：没有
name属性的<iframe>。 - 命名 iframe：有
name属性的<iframe>，可以通过window.frames访问。
应用场景
- 嵌入第三方内容：如地图、视频、社交媒体插件等。
- 多窗口应用：通过
<iframe>实现多个窗口的交互。 - 模块化设计：将页面分割成多个独立的模块，通过
<iframe>加载。
跨域取值问题
当 <iframe> 加载的内容来自不同域名时，浏览器会阻止跨域脚本访问，这是出于安全考虑（同源策略）。例如，如果主页面在 example.com，而 <iframe> 加载的内容在 otherdomain.com，则无法直接通过 JavaScript 访问 <iframe> 中的内容。
原因
浏览器的同源策略限制了不同源之间的脚本访问。同源是指协议、域名和端口都相同。
解决方法
- CORS（跨域资源共享）：服务器端设置
Access-Control-Allow-Origin头，允许特定域名访问资源。 - CORS（跨域资源共享）：服务器端设置
Access-Control-Allow-Origin头，允许特定域名访问资源。 - PostMessage API：通过
window.postMessage方法在不同窗口之间安全地传递消息。 - PostMessage API：通过
window.postMessage方法在不同窗口之间安全地传递消息。 - 服务器端代理：在服务器端设置一个代理，通过同源请求获取数据，然后返回给前端。
示例代码
主页面
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
</head>
<body>
<iframe id="myIframe" src="https://otherdomain.com/content.html"></iframe>
<script>
const iframe = document.getElementById('myIframe');
iframe.onload = () => {
iframe.contentWindow.postMessage('Hello from parent', 'https://otherdomain.com');
};
</script>
</body>
</html>iframe 页面
<!DOCTYPE html>
<html>
<head>
<title>Iframe Content</title>
</head>
<body>
<script>
window.addEventListener('message', (event) => {
if (event.origin !== 'https://example.com') return;
console.log('Message received:', event.data);
event.source.postMessage('Hello from iframe', event.origin);
});
</script>
</body>
</html>参考链接
通过以上方法，可以在不同域名和服务器之间安全地进行数据交互。
相关·内容
1回答
我有一台专用服务器，我将其拆分为多个虚拟服务器。在主服务器上，我对http (80)使用标准端口，但对于其他服务器，我被迫设置不同的端口。但我有一些空闲的域名。当用户通过特定的域访问时，使其不可见地重定向到另一台服务器的最佳方式是什么？我不想使用iframe或重定向到另一个网站。我想域名的行为就像共享的网络主机。但使用不同的服务器。
有可能这样做吗？
浏览 7提问于2012-08-16得票数 1
回答已采纳
我一直试图在index.php文件中的iframe上运行javascript代码，但没有成功，所以如果你们可以看看这个，我做错了什么，请：<script type="text/javascript">document.getElementById("resultFrame").contentWindow.iframe();inputs[0].value="nicefe
浏览 2提问于2015-01-03得票数 0
1回答
我需要在部署在WebLogic 10.3.6服务器上的2个或更多应用程序之间配置SAML。我成功地在两个不同的域之间配置了SAML，但我需要在相同域中的两个应用程序之间使用SAML，不同的受控服务器。如果我在相同的域、相同的受控服务器中部署应用程序，即使未配置SAML，凭据也会自动共享。App1在iframe中调用App2。当我访问App1时，登录页面正常工作。当我在iframe中访问App2时，凭据可以完美地从App1传输到App2，但当我返回App1时，会话就结束了
浏览 3提问于2013-01-29得票数 1
我有这个应用程序运行在云LAMP服务器和我的桌面与MAMP。我提供了访问这个应用程序通过一个iframe在另一个网站与不同的域名。如果我将iframe设置为指向本地MAMP环境，则iframe将在http请求标头中接收"cookie“，并且工作正常，但是如果我将其设置为prod服务器，则请求标头将缺少”cookie“。
浏览 0提问于2012-10-06得票数 0
我们有一个html页面，这是计划使用iframe，但我们不希望其他人使用我们的页面作为一个iframe.But我们托管我们的页面，将在不同的域。我怎么能限制只有我们的域名在iframe中获得该页面，而其他域名却不能呢？
我正在寻找一些javascript或jquery的解决方案。
浏览 0提问于2012-09-30得票数 0
回答已采纳
我使用不同域名的iframe。我不能碰iframe src的代码。我怎么才能修复它？
浏览 1提问于2011-04-25得票数 0
2回答
我正在创建这个没有服务器端的客户端webapp。例如，我想让这个客户端简单地向公共网站发出HTTP请求，比如。在我看来，客户端没有与公共互联网通信，而只是与本地服务器(它是空的)通信。
浏览 1提问于2013-06-28得票数 0
2回答
我目前有一个iframe例如：<iframe src="www.mydomain.com/myfram.php">和嵌入到我的客户页面与不同的域名。我希望"myfram.php"中的脚本能够检测嵌入iframe的父域(客户端域)。我使用$_SERVRE['SERVER_NAME']，但它返回的是我的域名，而不是客户端。
浏览 0提问于2012-12-06得票数 0
回答已采纳
我观察到的内容如下例所示：
我的负载均衡服务器池中有一台服务器。在从负载均衡url加载的外部页面中，我将一些值填充到Page_Load中的HttpContext.Current.Session中。在该页面上是一个iframe，它从特定的服务器url (与负载平衡页面命中的服务器相同)加载一个内部页面。
浏览 1提问于2012-09-26得票数 0
如果iframe src包含不同的域名，如何获取iframe的contentWindow.location？我已经在谷歌上搜索过了，但我找到了类似proxt的东西，那么我如何才能在iframe中获取窗口的位置，其中iframe src不在同一个域上？
浏览 16提问于2010-06-15得票数 0
我有一个小插件，它由一个iframe组成，里面有另一个iframe。这种结构是有意义的，因为第一个iframe只包含一些文本+点击按钮，这将打开第二个iframe与实际网站(两个互连的网页)
它在除safari之外的所有浏览器上都能很好地工作。我知道safari在iframe中的会话中表现得很奇怪，所以我真的很想看看这个问题是否已经解决了，或者对于那些开发类似于我的插件的人来说，这仍然是一个大问题。
浏览 2提问于2019-10-04得票数 0
我在一个网页的两个标签中添加了两个相同域名的URL。对于这些URL，我发送查询参数。参数相同，但值不同。此参数值存储在本地存储中。问题是localstorage的第一个iframe值覆盖了第二个iframe的localstorage。两个iframe的localstorage值相同。但它应该是不同的。 谢谢
浏览 34提问于2020-03-26得票数 0
我一直在使用一个免费的网络主机，给我一个免费的子域名。除此之外，我还可以创建两个子域。框架(隐形)--将整个站点置于一个iframe中。前者涉及到所有有意义的关于网络的内容，后者仅仅涉及到一个不同的领域。从本质上说，免费服务器将只承载文件，域将指向。我试图避免购买一台服务器来打开文件。
我认为“在域上添加”会有效。但是我只能用免费的主机创建其中的两个。因此，我似
浏览 0提问于2018-10-27得票数 2
回答已采纳
我试图在将内容栏保持在顶部的同时将网页加载到iFrame中，但是对于我试图加载到iFrame中的一些页面，加载内容就像我导航到该页面一样。我使用以下代码动态加载iframe：看起来这些页面上有一个脚本，它检查它是否被加载到<e
浏览 2提问于2010-03-31得票数 1
朋友们好，我在iframe中工作，我在菜单上遇到了问题。我想从iframe中添加nav-active类内部。当我从iframe点击查看更多的按钮内部，然后相应的页面应该打开，相应的页面菜单应该有导航活动的类。这个类应该只添加到菜单中的一个li元素。我已经附加了图像，.I已经尝试了以下菜单代码，但对我无效。
浏览 0提问于2017-01-06得票数 0
我有不止一个域名：-2. mydomain.fr4. mydomain.da
...and many other language based现在，我已经在服务器上部署了一个网站。我想分享在单一网站上的不同域之间的会话。我如何做到这一点？web <httpCookies domain=".mydomain.com" />上发现了，但是它适用于子域(如test.mydomain.com和secure.mydomain.com)，但不适用
浏览 6提问于2011-05-21得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
