nginx解决非同源 iframe 滚动控制问题

最新推荐文章于 2024-05-18 08:30:00 发布

10年程序员

最新推荐文章于 2024-05-18 08:30:00 发布

阅读量213

点赞数 4

文章标签： nginx 运维

本文链接：https://blog.csdn.net/qq_35309973/article/details/136253807

版权

需求描述：

开发一个页面 www.a.com，其有一区域是一个 iframe ，承载了第三方 www.b.com 的内容, 其内容高度超出了可视区域。在 www.a.com 页面中点击某一按钮后， iframe 中的内容向下滚动一定距离。可连续点击。

解析：

这个问题需要我们创建一个HTML页面，其中包含一个iframe元素，该iframe加载了另一个网页（www.b.com）。然后我们需要创建一个按钮，当点击这个按钮时，iframe中的内容会向下滚动一定的距离。如果连续点击此按钮，iframe会连续滚动，直到滚动到底部后停止响应。

<!DOCTYPE html>
<html>
<head>
    <title>www.a.com</title>
    <style>
        #myIframe {
            width: 100%;
            height: 500px;
            border: none;
            overflow: auto;
        }
    </style>
</head>
<body>
    <iframe id="myIframe" src="http://www.b.com"></iframe>
    <button onclick="scrollIframe()">滚动</button>

    <script>
        var scrollDistance = 50; // 设置滚动距离为50像素
        function scrollIframe() {
            var iframe = document.getElementById('myIframe');
            var maxScrollTop = iframe.contentWindow.document.body.scrollHeight - iframe.clientHeight;
            if (iframe.contentWindow.scrollY < maxScrollTop) {
                iframe.contentWindow.scrollBy(0, scrollDistance);
            } else {
                alert("已经滚动到底部");
            }
        }
    </script>
</body>
</html>

但由于浏览器跨域安全限制，通常不能直接从www.a.com页面中通过JavaScript控制www.b.com页面中的iframe内容。
这时我们可通过使用nginx代理来使第三方系统访问地址www.b.com代理到www.a.com域中。
nginx配置如下：

server {
        listen       80;
        server_name  www.a.com;
        location /back {
            # root   html;
			proxy_pass   http://www.b.com;
			proxy_redirect off;
			proxy_set_header Host $host:80;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			client_max_body_size    1000m;
			proxy_connect_timeout    600;
			proxy_read_timeout      600;
			proxy_send_timeout      600;
            index  index.html index.htm;
        }
		
		location / {
			root  E:/dist;
			index index.html;
			try_files $uri $uri/ /index.html;
  		 }
    }

从而实现在www.a.com某页面点击按钮控制iframe中加载的www.b.com页面滚动

10年程序员

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
nginx解决非同源 iframe 滚动控制问题

开发一个页面 www.a.com，其有一区域是一个 iframe ，承载了第三方 www.b.com 的内容, 其内容高度超出了可视区域。在 www.a.com 页面中点击某一按钮后， iframe 中的内容向下滚动一定距离。可连续点击。
复制链接

扫一扫