[Javascript]iFrame内の要素を取得したい

実現したいこと

Javascriptでiframe内の要素の制御をしたいです。
ただ、iframeで読み込んでいる先のURLにBasic認証をかけています。
それが原因かどうかわかりませんが、iframe内のDOM要素が取得できないです。

お力を貸してください。

発生している問題・エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7		<title>テストページ</title>
8		<link rel="stylesheet" href="css/html5reset-1.6.1.css">
9		<link rel="stylesheet" href="css/style.min.css">
10	</head>
11	<body class="">
12		<main id="main">
13			<div class="iframe">
14				<iframe src="https://abcdef.com" width="100%" id="sUrl"></iframe>
15			</div>
16		</main>
17		<script src="js/abc.js"></script>
18	</body>
19</html>

Javascript
1var eleFrame = document.querySelector('#sUrl');
2var ele = eleFrame.contentDocument;
3if (ele != undefined) {
4  // ここで処理をしたい
5}

試したこと

contentDocumentや
contentWindowで試みましたが、
URLの取得まではできても、DOM要素の取得はできませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

↓同一オリジンだそうなので取り消します。

スクリプトのあるページの URL と子フレームの URL で、プロトコル・ホスト名・ポート番号のどれかが異なると、子フレームのDOM要素にアクセスすることは不可能です。

~~同一オリジンポリシー~~

<iframe> のロード完了を待たないでアクセスしているのかもしません。該当 <iframe> の load イベントリスナで処理を開始すべきです。

投稿2022/09/13 12:56

編集2022/09/13 13:13

int32_t

総合スコア21927

entaro12345

2022/09/13 13:01

回答ありがとうございます。スクリプトのあるURLと子フレームのURLは同サーバーの別フォルダに配置しておりますが、それでもNGでしょうか。詳しいことが分かっておらずすみません、スクリプトのあるURL：https://XXX.com/YYY/abc.js 子フレームのURL：https://XXX.com/ZZZ/index.html