避免jsonp请求导致页面跳转

使用JSONP进行跨域数据获取时，有时会遇到接口返回window.location.href = ...导致页面意外跳转的问题。本文提供一种解决方案，有效防止此类情况发生。

挑战：无法直接访问响应文本

JSONP的机制决定了我们无法直接访问完整的响应文本，因此无法预先判断响应中是否包含跳转指令。

解决方案：利用iframe拦截跳转

我们可以通过iframe来加载JSONP接口。iframe的跳转不会影响父页面，因此我们可以利用这一点来拦截跳转。

iframe内跳转拦截代码

在iframe中，使用以下代码拦截window.location.href的设置：

<code class="javascript">Object.defineProperty(window.location, 'href', {
  set: function(value) {},
  get: function() { return this._href; },
});</code>

监听iframe加载事件并获取URL

iframe加载完成后，监听load事件，获取iframe内的window.location.href：

<code class="javascript">iframe.addEventListener('load', function() {
  const iframeLocation = iframe.contentWindow.location.href;
  // 处理 iframeLocation，判断是否发生跳转
});</code>

解析iframe内容并执行回调

获取iframeLocation后，解析其内容，判断是否存在跳转。如果未发生跳转，则安全地执行接口返回的JS代码（例如使用eval()，但需谨慎）。

通过这种方法，我们可以有效拦截JSONP接口返回的跳转指令，确保页面不会意外跳转，从而安全地获取跨域数据。 请注意，使用eval()存在安全风险，建议在实际应用中采用更安全的替代方案，例如使用更严格的输入验证和数据清洗。