阻止原始框架“null”访问跨源框架 - chrome

IT技术 javascript google-chrome
2021-03-15 13:13:32

我是 Javascript 的新手,正在通过一本教科书学习基础知识,该教科书侧重于 IE 7+ 和 Firefox 2+ 中的应用程序。但是,我正在使用 Chrome 并在运行书中给出的程序时遇到以下错误:“阻止了一个原始框架 'null' 访问跨源框架。” 谁能告诉我是什么导致了错误以及如何修复它?这两个程序如下。

//This is the program being loaded into the browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>

<script type="text/javascript">

function calcFactorial(factorialNumber){
    var factorialResult = 1;
    for(;factorialNumber>0;factorialNumber--) factorialResult *= factorialNumber;
    return factorialResult;
}

</script>

</head>

<frameset cols="100%,*">
<frame name="fraCalcFactorial" src="calcfactorial.htm"/>
</frameset>

</html>

下面是src文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script type="text/javascript">
function butCalculate_onclick(){
    try{
        if (window.top.calcFactorial == null)
            throw "This page is not loaded within the correct frameset";
        if (document.form1.txtNum1.value == "")
            throw "!Please enter a value before you calculate its factorial";
        if (isNaN(document.form1.txtNum1.value))
            throw "!Please enter a valid number";
        if (document.form1.txtNum1.value < 0)
            throw "!Please enter a positive number";
    }
    catch(exception){
        if (typeof(exception) == "string"){
            if (exception.charAt(0) == "!"){
                alert(exception.substr(1));
                document.form1.txtNum1.focus();
                document.form1.txtNum1.select();
            }
            else alert(exception);
        }
        else alert("The following error occurred: " + exception.message);
    }
}
</script>
</head>
<body>
<form action="" name="form1">
    <input type="text" name="txtNum1" size="3" /> factorial is
    <input type="text" name="txtResult" size="25" /><br/>
    <input type="button" value="Calculate Factorial"
        name="butCalculate" onclick="butCalculate_onclick()" />
</form>
</body>
</html>
3个回答

发生这种情况是因为 Chrome 不允许您硬盘中的帧访问彼此的内容。从技术上讲,我们称之为跨域请求。

解决上述问题的方法是:

1. 将您的网页托管在本地 Web 服务器上。请参阅以下链接:
Python 的 http.server(或 SimpleHTTPServer)的更快替代方法是什么?

2. 使用任何其他浏览器,如 Firefox

@TaouBen 现在可能不是正确答案。6年前回答并正确。如果您有更新的答案,可以将其添加到此帖子中,以便当前成员从中受益。谢谢
2021-05-04 13:13:32
@arunwebber 你在 Firefox 中尝试过吗?即使使用本地服务器,Chrome 也会阻止它
2021-05-14 13:13:32
Firefox 75.0 似乎有同样的问题
2021-05-18 13:13:32
当我在本地机器上托管后尝试时对我不起作用..遇到这个错误: blocked a frame of origin “http://127.0.0.1:8080” from accessing a cross-origin frame - chrome
2021-05-19 13:13:32
即使在从本地服务器运行后,也不对我有用
2021-05-20 13:13:32

如果您使用 Visual Studio Code,则可以安装名为“Live Server”的扩展。当我遇到同样的问题时,它帮助了我。

如果您不想按照已接受的答案中的建议使用本地 Web 服务器,则可以使用cross domain web security/same origin policy禁用运行浏览器

对于

在 Chrome 中禁用同源策略

对于火狐

在 Firefox 中禁用跨域 Web 安全

https://addons.mozilla.org/en-US/firefox/addon/access-control-allow-origin/

禁用 Firefox 同源策略