iframe 跨越访问_【HTML】iframe跨域访问问题

最新推荐文章于 2023-11-11 14:19:29 发布
最新推荐文章于 2023-11-11 14:19:29 发布
阅读量596 收藏
点赞数
文章标签： iframe 跨越访问
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33603105/article/details/113013706
版权

概述

本地同一浏览器访问本地HTML文件和访问服务器端HTML文件，本地Iframe没有自适应高度，而服务器端的Ifrane自适应了高度。

1.问题重现：

Chrome 版本 41.0.2272.101 (64-bit)

OS:Win8.1

Chrome访问服务器端HTML文件呈现的结果

207ea3439feff4fb4cc17da3cb47fd1f.png

Chrome访问本地HTML文件呈现的结果

dc06364f25a5f7d995a73087322bb1b9.png

本地访问的HTML文件Iframe没有根据Iframe里面的页面类容自适应高度

2.Iframe自适应高度代码

在index.html文件中间中添加Iframe页面,页面加载时，加载src指定的文件路径

JS脚本自适应调整Iframe高度

functioniFrameHeight(id) {var ifm =document.getElementById(id);var subWeb = document.frames ?document.frames[id].document : ifm.contentDocument;if (ifm != null && subWeb != null) {

ifm.height

最低0.47元/天 解锁文章
王知遇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html的页面怎样直接跨域访问,【HTML】iframe跨域访问问题
weixin_32823993的博客
06-22 1788
概述本地同一浏览器访问本地HTML文件和访问服务器端HTML文件，本地Iframe没有自适应高度，而服务器端的Ifrane自适应了高度。1.问题重现：Chrome 版本 41.0.2272.101 (64-bit)OS:Win8.1Chrome访问服务器端HTML文件呈现的结果Chrome访问本地HTML文件呈现的结果本地访问的HTML文件Iframe没有根据Iframe里面的页面类容自适应高度2...
iframe嵌套html页面跨域通信问题
apple_pingwan的博客
03-10 1489
公司内部开发了一套属于自己的c2插件，平时工作都是基于c2平台使用eclipse进行项目开发。 在其中一个项目中，开发的系统访问时路径中都带有#（例：http://localhost:8080/context/#/f/formId），在项目中要用到百度地图，于是在index.html中引入了在线的百度api，用示例的地址可以正常访问，但是，应项目需求，访问时要去掉地址中的#（例：http://localhost:8080/context/f/formId），此时访问便出现了问题，加在index.html页面
通过iframe嵌入三方系统时遇到的跨域问题及解决方案
_老逄
10-30 1万+
总结在iframe嵌入第三方系统时遇到的跨域访问问题
iframe跨域+
weixin_30826761的博客
04-24 240
script、image、iframe的src都不受同源策略的影响。所以我们可以借助这一特点，实现跨域。如前面所介绍的JSONP跨域，以及灯标(Beacons)。 该篇随笔主要阐述iframe结合一些技术，实现跨域请求。 　　1、iframe+window.name; 　　2、iframe+location.hash; 　　3、iframe+window.postMessage. 另，在...
跨域：利用iframe实现跨域DOM互访的四种方式
最新发布
qq_68163788的博客
11-11 6151
使用 iframe 实现跨域访问是一种常见的技术。通过将另一个域的内容嵌入到当前页面的 iframe 中，可以实现跨域访问。这种方法通常用于在网页中嵌入来自不同域的内容，比如嵌入其他网站的地图、视频或其他资源。 但需要注意的是，由于安全原因，浏览器通常会限制跨域访问，因此在使用 iframe 实现跨域访问时，需要确保被嵌入的内容允许跨域访问，或者采取其他安全措施来确保安全性。使用 iframe 实现跨域访问是一种常见的技术。通过将另一个域的内容嵌入到当前页面的 iframe 中，可以实现跨域访问。
html框架跨域名,iframe操作(跨域解决等)_html/css_WEB-ITnose
weixin_39665762的博客
06-04 301
note:当页面内嵌入一个iframe实际上是在dom上新建了一个新的完整的window对象iframe中取得主窗体window.top (顶级窗口的window对象)window.parent (当前iframe的父窗体window)多层嵌套的iframe window.parent.parent....来取取得需要的window后可进行操作父文档的内容如: window.top.documen...
利用代理页面解决html iframe跨域访问网站问题
云淡风轻、仅此一抹
11-15 3万+
原文：利用代理页面解决html iframe跨域访问网站问题 源代码下载地址：http://www.zuidaima.com/share/1854884509142016.htm 在做项目的时候遇到跨域问题，经过自己的一番摸索终于找到一种解决iframe跨域问题的方案，或许很多人也会遇到这样头疼的问题，希望能尽自己绵薄之力帮助大家。如果不清楚或者有问题的可以留言和私信我，谢
iframe跨域与session失效问题的解决办法
01-21
何为跨域跨域session/cookie？ 也就是第三方session/cookie。第一方session/cookie指的是访客当前访问的网站给访客的浏览器设置的seesion /cookie, 会被存储在访客的计算机上。第三方session/cookie指的是当前访问的...
跨域修改iframe页面内容详解
12-13
需要将proxy.html放到与内嵌的iframe页同域的服务下, 并且可以被访问到. 使用 支持2种调用方式: 使用 postMessage 和 URL params. postMessage 该方法需要使用 JSON.stringify 将对象转为字符串. // React function...
php main 与 iframe 相互通讯类 同域 跨域）
12-30
在实现跨域通信时，通常需要在服务器端设置适当的CORS（跨源资源共享）头部，允许特定的源访问资源。在PHP中，可以通过设置`header`函数来实现： ```php header('Access-Control-Allow-Origin: ' . $_SERVER['...
iframe与主框架跨域相互访问
12-27
iframe 与主框架相互访问例子，包含同域访问，跨域访问例子。
完美解决iframe跨域问题
04-18
框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）.zip
01-06
demo地址：http://www.tkcb.cc/menu/blog/html/html_0001/index.html 练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的技术分享，还有我们乐队推荐的游戏、软件、电影、作品、超赞链接推荐等等。 最后，我会在CSDN陆续分享我的大量的（至少几百个）技术练习、经验等，希望大家多多交流，相互学习。
深入浅析同源策略和跨域访问
11-22
4. iframe与postMessage：尽管iframe加载的内容受限于同源策略，但使用`window.postMessage`方法可以在不同源的iframe之间传递消息，实现一定程度的跨域通信。 5. 代理服务器：通过在服务器端设置代理，将跨域请求...
iFrame的妙用作为弹出层铺底覆盖
09-28
总结，iFrame在网页开发中扮演着重要的角色，尤其是在处理弹出层遮罩和跨域数据交换的问题上。尽管现代浏览器已经提供了更多高级功能来替代iFrame，但在兼容性和特定场景下，iFrame仍然是一个实用且有效的工具。
工作两年了，面试官问我什么是跨域，以及跨域怎么形成的，有哪些解决方案，我蒙了，我tm是真的菜。。。
weixin_40693638的博客
07-24 360
工作了两年，面试官问我什么是跨域，以及跨域怎么形成的，怎么解决，我蒙了。。。什么是跨域？解决1：解决2：解决3：解决4： 工作了两年，面试官问我什么是跨域，以及跨域怎么形成的，怎么解决，我蒙了。。。什么是跨域？解决1：解决2：解决3：解决4： 什么是跨域？ 跨域就是浏览器的同源策略导致的，同源策略：协议+域名+端口，只要有一个不同，就不是同源。 当前端部署在Nginx上监听的端口是8000.但是后端部署在tomcat上监听8080端口，那么浏览器访问前端页面的时候是8000端口，但是要到后端8080端口获取
与iframe进行跨域交互的解决方案
提笔忘字的帝国
03-12 7313
在Web开发中，为了避免安全漏洞，浏览器会实行同源策略（Same-Origin Policy），即只允许同源网页之间进行交互，而跨域的交互是被禁止的。但是，有时我们需要在不同域名的页面之间进行数据传递和交互。
学会iframe并用其解决跨域问题
m0_59345890的博客
08-03 2万+
我们设置了一个名为ifr，宽为600，高为400，显示边框，隐藏滑动条，显示文档为b站（也可以选择本地html文档）的内联框架。我们可以在iframe标签中写上文字说明，因为有一些低版本浏览器不支持这个标签，显示不了文档的时候就会在页面显示我们写的文字。父页面通过iframe嵌入子页面，通过iframe.contentWindow获取子页面的window,即可操作子页面，子页面通过parent.window和parent来访问父页面的window。src:规定在 中显示的文档的 URL。...
iframe 标签
热门推荐
过客如期的博客
10-27 8万+
一，什么是iframe 1.iframe是html元素，用于在网页中内嵌另一个网页。 2.iframe默认有一个宽高,存在边界 3.iframe是一个行内快级元素，可以通过display修改 二，iframe元素属性介绍 1.src : 指定内联网页的地址 2.frameborder: iframe默认有个边界，可以设置frameborder为0清除边界。 3.width,height: 控制iframe的宽高。 4.name： 框架的名称 5.scrolling： 是否可滚动，yes ,no , auto
代理页面解决iframe跨域访问的问题aspx
05-01
在 ASP.NET 中，可以使用代理页面来解决 iframe 跨域访问的问题。代理页面的作用是将客户端请求发送到目标网站，然后将目标网站的响应返回给客户端，从而实现跨域访问。 以下是一个简单的代理页面示例： ```c# <%@ Page Language="C#" %> <%@ Import Namespace="System.Net" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { // 获取目标网站的 URL string targetUrl = Request.QueryString["url"]; // 创建 WebRequest 对象 HttpWebRequest request = (HttpWebRequest)WebRequest.Create(targetUrl); // 发送请求并获取响应 HttpWebResponse response = (HttpWebResponse)request.GetResponse(); // 将响应内容输出到客户端 Response.Clear(); Response.ContentType = "text/html"; using (StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8)) { Response.Write(reader.ReadToEnd()); } Response.End(); } </script> ``` 在页面中，我们首先获取到客户端传递过来的目标网站 URL，然后创建一个 WebRequest 对象发送请求，获取响应内容，并将响应内容输出到客户端。 使用代理页面时，我们需要将 iframe 的 src 属性设置为代理页面的 URL，同时需要将目标网站的 URL 作为参数传递给代理页面。例如： ```html <iframe src="Proxy.aspx?url=http://www.example.com"></iframe> ``` 这样就可以实现跨域访问了。需要注意的是，代理页面会将客户端的请求转发到目标网站，因此在使用代理页面时需要考虑安全问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值