阻止了来自“null”起源的框架访问跨域框架 - Chrome

Question

阻止了来自“null”起源的框架访问跨域框架 - Chrome

47

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

以下是源文件

<!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>

- Matt Fenlon

1

你是在本地机器上运行还是托管在Web服务器上？ - CodingIntrigue

4

默认情况下，Chrome不允许从本地硬盘加载的框架访问彼此的内容。如果这些框架在同一台Web服务器上，则可以访问。Chrome有一个命令行参数，可以暂时暂停此安全检查。 - jfriend00

1

请注意，此问题适用于“iframe”和“frame”。 - posfan12

4个回答

7

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

- Олексій Сивак

3

如果您不想像接受的答案中建议的那样使用本地Web服务器，您可以使用已禁用“跨域Web安全” /“同源策略”的浏览器运行。

对于Chrome：

禁用Chrome中的同源策略

对于Firefox：

禁用Firefox中的跨域Web安全

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

禁用Firefox同源策略

- Alex P.

1

将以下代码保存为same_server_source.html，在同一文件夹中运行python -m http.server，然后浏览到http://localhost:8000/same_server_source.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View same server source</title>
</head>
<body>
    <iframe id="iframe" src="/" sandbox="allow-scripts allow-same-origin allow-modal"></iframe><br>
    <button onclick="alert(iframe.contentWindow.document.body.innerHTML)">View home source</button>
</body>
</html>

- Cees Timmerman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- amulya349 · Accepted Answer

这是因为Chrome不允许来自硬盘的框架访问彼此的内容。技术上，我们将其称为跨源请求。

上述问题的解决方案：

1. 或者您可以在本地Web服务器上托管您的网页。请参阅以下链接：
Python的http.server（或SimpleHTTPServer）的更快替代方法是什么？

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