[解決済み】オリジン "null "のフレームがクロスオリジンフレームにアクセスするのをブロック - chrome
2022-02-13 18:47:08
質問
Javascriptの初心者で、IE7+とFirefox2+での応用を中心とした教科書で基本を学んでいるところです。しかし、私はChromeを使っているのですが、この本で紹介されているプログラムを実行すると次のようなエラーが発生します: "オリジン「null」のフレームがクロスオリジンフレームにアクセスするのをブロックしました." 何が原因でこのエラーが発生しているか、どうやったら修正できるか、誰か教えてください。以下、2つのプログラムです。
//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>
解決方法は?
これは、Chromeがハードディスク内のフレームが互いのコンテンツにアクセスすることを許可していないために起こります。これは、技術的にはクロスオリジンリクエストと呼ばれています。
上記の問題の解決策は
1. ローカルウェブサーバーでウェブページをホストしているかどうか。次のリンクを参照してください。
Pythonのhttp.server(またはSimpleHTTPServer)に代わる、より高速なものは何ですか?
2. Firefoxなどの他のブラウザを使用する
関連
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】XMLHttpRequestモジュールが定義されていない/見つからない
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] Chromeの同一生成元ポリシーを無効にする
-
[解決済み] Firefox または Chrome ブラウザから HTTP POST リクエストを手動で送信する方法
-
[解決済み] ローカルファイルの読み込み時に "Cross origin requests are only supported for HTTP." というエラーが発生する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか?
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み] Chromeの同一生成元ポリシーを無効にする
-
[解決済み】Pythonのhttp.server(またはSimpleHTTPServer)に代わる、より高速なものは何ですか?)