前端实战------跨域问题

这两天遇到一个问题就是在首页点登录的时候用iframe框架弹出登录界面，输入用户密码点登录的时候发现不能关掉这个弹出界面(取消也不行)，使用很多方法都不行，最后求助百度，终于让我找到了同源策略---跨域。下面稍微讲一下：

同源策略指的是：端口、协议、域名相同

同源策略是什么

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以baidu.com下的js脚本采用ajax读取sogou.com里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

另外，同源策略又分为以下两种：

DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

怎么解决我的这个问题

简单介绍一下情况，在A.html页面有一个iframe框架引用了B.html页面，我们现在呢需要点击B.html里面的按钮来关闭iframe或者登录后关闭；这里很多人会讲我引用同一个js，用里面的函数不行吗？这里我也试过，不知道是我没弄好还是怎么了，效果就是达不到，所以找到了同源策略来解决它。话不多说先上代码：

index.html

<div id="Bullet_w">
	<span id="close">X</span>
    <iframe frameborder="0" scrolling="no" src="login.html" id="iframeBullet" width="100%" height="100%"></iframe>
</div>

<div id="login_div">
	<form id="login_form" class="row" action="" method="post">
		<p>用户登录</p>
		<label>用户名：</label><input id="name" type="text" required="required" autofocus="autofocus" /><br />
		<label>密&nbsp;&nbsp;&nbsp;码：</label><input id="password" type="password" required="required" /><br />
		<input type="button" value="登录" class="btn btn-group col-lg-3" id="login"/>
		<input type="button" value="取消" class="btn btn-group" id="cancel" style=" margin-left: 10px;"/>
		<a href=" #" id="log">忘记密码?</a><a href="Registration.html" id="Reg">立即注册</a>
	</form>
</div>
<script type="text/javascript">
	$('#login').click(function() {
		var name = document.getElementById('name').value;
		var pass = document.getElementById('password').value;
		window.parent.sava(name,pass);
	})
	$('#cancel').click(function() {
		window.parent.cancel();
	})
</script>

index.js

function cancel(){
	$('#Bullet_w').css('display','none');
}

function sava(name,pass) {
	if (name == "admin" && pass == 123456) {
		alert("登录成功！");
		cancel();
		document.getElementById("login_suc").innerHTML = "<a>欢迎回来，" + name + "</a>";
	} else {
		alert("登录失败！");
	}
}

总结：

子iframe内调用父类函数方法：window.parent.function();

同时他也能传参数，可以帮你解决js获取不了子页面元素的情况。可能说的不够详细，不太了解的可以先去了解一下同源策略。本文的解决方法可能不是最好的，这里写出来给各位借鉴一下，有问题的地方希望各位指点一下。

来源：CSDN

作者：Small ink

链接：https://blog.csdn.net/qq_41681904/article/details/104833563

标签

iframe

同源策略

前端