Question

我是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>

Answer 1

这是因为Chrome不允许硬盘中的帧访问彼此。内容。从技术上讲，我们称之为跨源请求。

上述问题的解决方案是：

1.您在本地Web服务器上托管您的网页。请参阅以下链接：
What is a faster alternative to Python's http.server (or SimpleHTTPServer)?

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

Answer 2

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

对于 Chrome ：

Disable same origin policy in Chrome

对于 Firefox ：

Disable cross domain web security in Firefox

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

Disable firefox same origin policy

Answer 3

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

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

3 个答案: