1. はじめに
私のページは、iframe が埋め込まれた EasyUI のポップアップ ウィンドウを使用しています。
最初: 親ウィンドウが子ウィンドウを開くと、ユーザー情報を追加する iframe サブページが表示されます。[保存] をクリックすると、子ウィンドウ iframe は親ウィンドウの関数 closeAddWindow() メソッドを呼び出し、親ウィンドウを閉じることができます。新しく追加されたページ
2 番目: 親ウィンドウは、ユーザー権限を設定するための iframe サブウィンドウを開きます。まず、このサブウィンドウを開くと、データベース テーブル内の既存の権限がすべて読み込まれます。次に、サブウィンドウは、読み込まれた権限情報を結合する必要があります。 html ID への追加
はい、以上です。もっと例を見てみましょう! ！ ~~~~~~(*^__^*) ふふふ…
2. iframe の子ウィンドウと親ウィンドウのメソッド呼び出し
2.1 文法使用法
1. 親ウィンドウに埋め込まれた iframe
2. 親ウィンドウは子ウィンドウのメソッド
を呼び出します。myFrame.window.sonMethod();
3. 子ウィンドウは親ウィンドウのメソッド
を呼び出します。parent.fatherMethod();
4. ブラウザ互換の iframe 読み込み完了メソッド
if (myFrame.attachEvent) {
myFrame.attachEvent("onload", function () {
alert("兼容IE加载的加载方法");
});
} else {
myFrame.onload = function () {
alert("兼容其他浏览器加载方法");
};
}
2.2 文法コード
Father.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div>我是父窗口内容</div>
<div><input type="button" id="btnFather" value="调用子窗口方法" /></div>
<br />
<br />
<br />
<iframe id='myFrame' name="myFrame" src="FChild.html" width='100%' height='100%' frameborder='0'></iframe>
<script type="text/javascript">
document.getElementById("btnFather").onclick=function () {
myFrame.window.sonMethod();
}
function fatherMethod() {
alert("父窗口方法!");
}
if (myFrame.attachEvent) {
myFrame.attachEvent("onload", function () {
alert("兼容IE加载的加载方法");
});
} else {
myFrame.onload = function () {
alert("兼容其他浏览器加载方法");
};
}
</script>
</body>
</html>
FChild.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div style="border:1px solid red;"> 我是子窗体内容</div>
<div > <input type="button" id="btnSon" value="调用父窗口方法" /></div>
<script type="text/javascript">
document.getElementById("btnSon").onclick = function () {
parent.fatherMethod();
}
function sonMethod() {
alert("子窗口方法!");
}
</script>
</body>
</html>
3. myFrame.onload または myFrame.attachEvent を使用する場合
ここでは easyui フレームワーク フロントエンド フレームワークが使用されます
<div id="divRoleUsers" title="设置用户角色" class="easyui-window" closed="true" collapsible="false" minimizable="false" maximizable="false" style="width: 140px; height: 250px; padding: 5px;">
</div>
<div > <input type="button" id="btn" value="设置用户角色" /></div>
<script type="text/javascript">
$("#btn").click(function () {
showSetUserRoleWindow();
});
//设置用户角色
function showSetUserRoleWindow() {
var getSelections = $("#tt").datagrid("getSelections");
if (getSelections.length > 1 || getSelections.length == 0) {
$.messager.alert("错误提示", "请选中一行数据!", "error");
return false;
}
var data = getSelections[0]; //获取选中的一行所有json的数据
//if ($("#divRoleUsers #iframe").length != 0) {
// $("#divRoleUsers #iframe").remove();
//}
// $('#divRoleUsers').append("<iframe id='iframe' name='iframe' src='RoleUsers_Update.aspx?UserID=" + data.UserID + "' width='100%' height='100%' frameborder='0'></iframe>");
//错误做法！：上面src='RoleUsers_Update.aspx?UserID=" + data.UserID + "' 这里通过拼接参数iframe的src，
//然后通过子窗口 parent.document.getElementById("iframe").getAttribute("src");//获取父窗体iframe的src 发现根据获取不到UserID的值，为null，也是因为加载顺序先后的问题，导致我要用给iframe注册onload事件后才能获取到我需要的结果
//if (myframe.attachEvent) {
// myframe.attachEvent("onload", function () {
// alert("Local iframe is now loaded.");
// myframe.window.loadAllRole();
// });
//} else {
// myframe.onload = function () {
// alert("Local iframe is now loaded.");
// myframe.window.loadAllRole();
// };
//}
if ($("#divRoleUsers #myframe").length != 0) { //这一步是必须的！！！，因为不加这一句下面onload绑定事件只执行一次，我需要每次加载完iframe都调用一次子窗口的方法！
$("#divRoleUsers #myframe").remove();
}
$('#divRoleUsers').append("<iframe id='myframe' name='myframe' src='RoleUsers_Update.aspx' width='100%' height='100%' frameborder='0'></iframe>");
if (myframe.attachEvent) {
myframe.attachEvent("onload", function () {
myframe.window.loadAllRole();
myframe.window.loadUserRole(data.UserID);
});
} else {
myframe.onload = function () {
myframe.window.loadAllRole(); //调用子窗口iframe里面的方法加载所有的角色checkbox
myframe.window.loadUserRole(data.UserID); //接着传递用户ID过去给子窗口的方法，给用户拥有的角色设置checkbox选中
};
}
$('#divRoleUsers').window('open');
}
</script>
4. いくつかの重要なポイントをまとめてみましょう
親子ウィンドウ メソッドを呼び出すときは、望ましい結果を得るためにロードの順序に注意してください。問題が発生した場合は、多くの場合、alter() を使用してブラウザの開発者ツールをテストまたは監視できます。
以上の内容は、この記事のiframeの子親クラスウィンドウでJSを呼び出す方法と注意点です。
JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AMJavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。
CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AMCおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。
Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AMJavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。
Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AMPythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AMCとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
