javascript - 无法访问 iframe 内容(同源策略)

标签 javascript jquery html iframe same-origin-policy

我有以下页面

<!DOCTYPE html> 
<html>
<script type="text/javascript">
    function loopLink(i) 
    {
        window.open($('#iframe_a').contents().find('.image-navigator-mid a').attr('href'),'iframe_a');
        setTimeout(function()
        {
            if (i < 3) loopLink(i+1);
        }, 5000);
    }
    // Wait for the page to load first
    window.onload = function() {

      var a = document.getElementById("mylink");

      a.onclick = function() {
        loopLink(0);
        return false;
      }
    }
</script>
<iframe src="http://nanofate.us/content/fate-new-hair-style#node-inner" width="500" height="500" name="iframe_a" id="iframe_a"></iframe>
<br />
<a id="mylink" href="">Execute</a>

想法是,在当前形式下,当您单击“执行”时,javascript 将使 iframe 使用“上一个”链接 4 次,每次等待 5 秒,但是当我单击链接时,它只是重新加载页面甚至在等待 10 秒后,iframe 什么也不做

我想知道我做错了什么

最佳答案

由于Same Origin Policy限制,如果它正在运行来自另一个域的页面,则无法访问 iframe 的内容。有相同域策略的解决方案,例如

  • 通过代理打开页面

查看 Tomodo .这只是为了给你一个提示,他们是如何使用代理来绕过同源策略约束并访问 iframe 内容的。所以实现思路是这样的

  • 创建代理并将其托管在 a.com/proxy
  • a.com/index.html 上托管您的主页
  • 现在,请求您的代理为您提供 iframe_url 的内容,例如 a.com/proxy?url=iframe_url.com

请注意这不是一项微不足道的任务,您可能需要在代理处处理很多情况,例如处理相对 URL通过 iframe_url 读取 cookie 等等等等 因此,只有在您迫切需要它时才去做。

另一种解决方案可能是这样的:

如果您想为特定域下载一些图像,只需请求您的服务器端代码即可。您的后端代码将获取页面的 html 并使用一些 HTML 解析器,如

解析 img 标签并提取源并获取图像并下载它们。

PS:为了一些有用的信息,请阅读 Ways to circumvent same origin policy

关于javascript - 无法访问 iframe 内容(同源策略),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20943686/

相关文章:

JavaScript - 使用回车符和换行符解析 JSON

javascript - 领英 API : Dynamic UI Component

javascript - 当标签没有名称时,如何检索标签的内容?

javascript - jquery 显示/隐藏使图像变大

javascript - TypeScript 中的可变泛型类型?

javascript - 为什么 Javascript 返回不正确的 UTC 月份值?

javascript - 第一次加载组件时 Angular 4 ngOnInit 不工作

jquery - 如何仅显示 Twitter 列表中的成员列表及其头像

jquery - 如何保存 dom 元素并存储到变量以及如何调用它

javascript - 尝试加载本地 json 文件,但无法在外部范围中读取它