iframe_javascript 스킬에서 자식 상위 클래스 창에서 JS를 호출하는 방법 및 주의사항-JS 튜토리얼-php.cn

iframe_javascript 스킬에서 자식 상위 클래스 창에서 JS를 호출하는 방법 및 주의사항

WBOY

풀어 주다： 2016-05-16 15:42:59

원래의

1659명이 탐색했습니다.

1. 서문

마이 페이지는 iframe이 내장된 EasyUI의 팝업 창을 사용합니다.

첫 번째: 상위 창이 하위 창을 열 때 사용자 정보를 추가하는 iframe 하위 페이지입니다. 저장을 클릭하면 하위 창 iframe이 상위 창의 closeAddWindow() 메서드를 호출하여 상위 창이 닫힐 수 있도록 합니다. 새로 추가된 페이지

두 번째: 상위 창은 사용자 권한을 설정하기 위해 iframe 하위 창을 엽니다. 먼저 이 하위 창을 열면 데이터베이스 테이블의 모든 기존 권한이 로드되고 하위 창은 로드된 권한 정보를 html ID에 추가

의 경우 상위 창이 하위 창을 열고 모든 권한을 로드한 후 테이블에 html을 추가할 수 없다는 문제가 있습니다. id="tb"인 이유는 매우 간단합니다. 왜냐하면 상위 창이 하위 창을 호출하여 모든 권한 정보를 로드한 후 하위 페이지가 완전히 로드되지 않았기 때문에 테이블 요소를 찾을 수 없기 때문입니다. 여기에도 소개되어 있습니다. iframe에 대한 onload 이벤트를 등록하고 로딩이 완료될 때까지 기다린 다음 추가 메서드를 호출합니다.

자, 그럼 더 많은 예시를 살펴보겠습니다! ! ~~~~~(*^__^*) 히히...

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 문법 코드

아버지.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&#63;UserID=" + data.UserID + "' width='100%' height='100%' frameborder='0'></iframe>");
      //错误做法！：上面src='RoleUsers_Update.aspx&#63;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를 호출하는 방법과 주의사항입니다.