iframe父页面改变子页面（注意：调用子页面元素一定要让它加载完才行 iframe.attachEvent("onload", function () ）

60 阅读 0 评论 40 点赞
我是靠谱客的博主简单翅膀，最近开发中收集的这篇文章主要介绍iframe父页面改变子页面（注意：调用子页面元素一定要让它加载完才行 iframe.attachEvent("onload", function () ），觉得挺不错的，现在分享给大家，希望可以做个参考。
概述

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"
deferredSyntaxAllowedAsLiteral="true" %>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>工单详情</title>
<jsp:useBean id="user" scope="session" class="hiapp.system.buinfo.User"></jsp:useBean>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/synrouteStyle-1.0.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/commonStyle-1.02.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/material/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/color.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/demo.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/hiapp.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/hiapp.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/hiagent.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/optiscroll.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/modules/dev/pagedesign.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/hiframe/hiframework.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/pagecontroler.js"></script>
</head>
<style>
ul {
list-style: none;
padding: 0px;
margin: 0px;
width: 100%;
border-top: 0px;
font-size: 2rem;
}
ul li {
display: block;
width: 100%;
float: left;
font-size: 3rem;
}
ul li label {
width: 50%;
text-align: left;
}
.submit {
text-align: center;
width: 12rem;
height: 5rem;
font-size: 3rem
}
span {
font-size: 3rem;
padding-left: 10rem;
padding-right: 10rem;
}
#iframeInfo {
width: 100%;
}
</style>
<body>
<div style="width: 100%;height: 7rem;background:#EEF1F6;text-align: center; padding-top: 2rem; ">
<input type="button" onclick="javascript:window.opener=null;window.open('','_self');window.close();"
style="font-size:3rem; " value="< 返回"/>
<span>工单详情 </span>
<input type="button" style="font-size:3rem; " id="nextRow" value="下一条"/>
</div>
<div id="detail" style="visibility: hidden;height:auto;">
<iframe id="iframeInfo" name="iframeInfo" src="" border=0 frameborder=0 width="100%" height="100%" scrolling="yes">
</iframe>
</div>
</body>
<script>
function GetUrlParam(paraName) {
var url = document.location.toString();
return url.substring(url.indexOf("=") + 1, url.length);
}
var url = GetUrlParam('url');
$("#iframeInfo").attr('src', url);
$("#iframeInfo").css('min-height', '80rem');
$("#nextRow").click(function () {
});
var iframe = document.getElementById("iframeInfo");
if (iframe.attachEvent) {
iframe.attachEvent("onload", function () {
// getPage();
});
} else {
iframe.onload = function () {
setTimeout(function () {
getPage();
$("#detail").css("visibility", "visible");
}, 1000);
iframe.contentDocument.onclick = function () {
console.log(this);
if ($(this).find("iframe").length > 0) {
var wo = $("iframe")[0].contentWindow;
wo.$('.panel-title').css("font-size", "1.8rem");
var btnDialog = wo.$(".dialog-button");
$(btnDialog).children().css("width", "6rem");
$(btnDialog).children().css("text-align", "center");
$(btnDialog).children().css("height", "2rem");
$(btnDialog).children().children().css('font-size', '1.2rem');
$(btnDialog).children().children().css("vertical-align", "middle");
$(btnDialog).children().children().css("line-height", "2rem");
$(btnDialog).children().children().css("height", "2rem");
$(btnDialog).children().children().children().css("height", "2rem");
$(btnDialog).children().children().children().css('font-size', '1.2rem');
$(btnDialog).children().children().children().css("vertical-align", "middle");
$(btnDialog).children().children().children().css("line-height", "2rem");
var ifr = wo.$("iframe")[0];
var ws;
if (ifr.attachEvent) {
ifr.attachEvent("onload", function () {
});
} else {
ifr.onload = function () {
setTimeout(function () {
ws = ifr.contentWindow;
var cn = ws.$("#combobox-nextnode");
cn.prev().css("font-size", "1.5rem");
cn.prev().css("line-height", "2rem");
cn.prev().css("width", "30%");
cn.prev().css("height", "2rem");
cn.next().css("vertical-align", "middle");
cn.next().css("width", "70%");
cn.next().children().children().css("height", "2rem");
cn.next().children().first().css("width", "2rem");
cn.next().children().eq(1).css("line-height", "2rem");
cn.next().children().eq(1).css("font-size", "1.5rem");
cn.next().children().eq(1).css("height", "2rem");
ws.$('.panel-title').css("font-size", "1.5rem");
var div = ws.$(".datagrid-btable td div");
$(div[0]).children().css("width", "1rem");
$(div[0]).children().css("height", "1rem");
$(div[0]).children().css("line-height", "1rem");
$(div[0]).children().css("vertical-align", "middle");
for (var i = 0; i < div.length; i++) {
$(div[i]).css("font-size", "1.5rem");
$(div[i]).css("width", "4rem");
$(div[i]).css("height", "2rem");
$(div[i]).parent().css("width", "4rem");
$(div[i]).css("line-height", "1.5rem");
$(div[i]).parent().css("height", "2rem");
$(div[i]).css("vertical-align", "middle");
}
var sp = ws.$(".datagrid-header-row td div span");
var x = ws.$(".datagrid-header-row td div");
$(x[0]).children().css("width", "1rem");
$(x[0]).children().css("height", "1rem");
$(x[0]).children().css("line-height", "1rem");
$(x[0]).children().css("vertical-align", "middle");
for (var i = 0; i < sp.length; i++) {
$(sp[i]).css("font-size", "1rem");
$(sp[i]).css("width", "4rem");
$(sp[i]).css("height", "2rem");
$(sp[i]).parent().css("width", "4rem");
$(sp[i]).css("line-height", "2rem");
$(sp[i]).parent().css("height", "2rem");
$(sp[i]).css("vertical-align", "middle");
}
}, 100);
}
}
}
};
}
}
function getPage() {
var w = $("#iframeInfo")[0].contentWindow;
w.$("#hiapp-page").find('.panel-header').css("height", "3.2rem");
w.$("#hiapp-page").find('.panel-header').find(".panel-title").css("font-size", "2.2rem");
w.$("#hiapp-page").find('.panel-header').find(".panel-title").css("height", "3rem");
var textbox = w.$(".hiapp-control-textbox");
var combox = w.$(".hiapp-control-combobox");
var datetimebox = w.$(".hiapp-control-datetimebox");
var btn = w.$(".hiapp-control-button");
var radio = w.$(".hiapp-control-radioboxlist");
var checkbox = w.$(".hiapp-control-checkboxlist");
var filebox = w.$(".hiapp-control-filebox");
$(textbox).css("width", "50%");
$(combox).css("width", "50%");
$(datetimebox).css("width", "50%");
$(radio).css("width", "50%");
$(checkbox).css("width", "50%");
$(filebox).css("width", "50%");
/**
* list类型的
* */
var panelCaselist = w.$("#panel-caselist");
var a = panelCaselist.find("a");
for (var i = 0; i < a.length; i++) {
$(a[i]).children().css("width", "8rem");
$(a[i]).children().css("text-align", "center");
$(a[i]).children().css("height", "4rem");
$(a[i]).children().children().first().css("height", "4rem");
$(a[i]).children().children().first().css('font-size', '2.5rem');
$(a[i]).children().children().first().css("vertical-align", "middle");
$(a[i]).children().children().first().css("line-height", "4rem");
}
var header = panelCaselist.find(".datagrid-header");
for (var i = 0; i < header.length; i++) {
$(header[1]).css("height", "4rem");
}
var sp = panelCaselist.find(".datagrid-header-row td div span");
var td_div = panelCaselist.find(".datagrid-btable tr td div");
var pageRow = panelCaselist.find(".datagrid-pager.pagination tr td")
var panelCaseflow = w.$("#panel-caseflow");
var header2 = panelCaseflow.find(".datagrid-header");
for (var i = 0; i < header2.length; i++) {
$(header2[1]).css("height", "4rem");
}
var sp2 = panelCaseflow.find(".datagrid-header-row td div span");
var td_div2 = panelCaseflow.find(".datagrid-btable tr td div");
var pageRow2 = panelCaseflow.find(".datagrid-pager.pagination tr td");
/**
* 修改页面不存在的元素
*/
$(document).ready(function () {
$.parser.parse();
setCss(textbox, combox, datetimebox,btn,radio,checkbox,filebox);
setDataGrid(sp, td_div, pageRow);
setDataGrid(sp2, td_div2, pageRow2);
});
/**
* 设置样式方法
* */
function setCss(textbox, combox, datetimebox,btn,radio,checkbox,filebox) {
for(var i = 0;i<textbox.length;i++){
$(textbox[i]).children().first().css("width", "45%");
$(textbox[i]).children().first().css("font-size", "2.2rem");
$(textbox[i]).children().first().css("height", "4rem");
$(textbox[i]).children().first().css("line-height", "4rem");
$(textbox[i]).children().first().css("vertical-align", "middle");
$(textbox[i]).children().eq(2).css("width", "53%");
$(textbox[i]).children().eq(2).css("margin-left", "2%");
$(textbox[i]).children().eq(2).css("height", "4rem");
$(textbox[i]).children().eq(2).css("line-height", "4rem");
$(textbox[i]).children().eq(2).css("vertical-align", "middle");
$(textbox[i]).children().eq(2).children().first().css("line-height", "4rem");
$(textbox[i]).children().eq(2).children().first().css("font-size", "2.2rem");
$(textbox[i]).children().eq(2).children().first().css("height", "4rem");
}
for(var i = 0;i<datetimebox.length;i++){
$(datetimebox[i]).children().first().css("width", "42%");
$(datetimebox[i]).children().first().css("font-size", "2.2rem");
$(datetimebox[i]).children().first().css("height", "4rem");
$(datetimebox[i]).children().first().css("line-height", "4rem");
$(datetimebox[i]).children().first().css("vertical-align", "middle");
$(datetimebox[i]).children().eq(2).css("width", "53%");
$(datetimebox[i]).children().eq(2).css("margin-left", "2%");
$(datetimebox[i]).children().eq(2).css("height", "4rem");
$(datetimebox[i]).children().eq(2).css("line-height", "4rem");
$(datetimebox[i]).children().eq(2).css("vertical-align", "middle");
$(datetimebox[i]).children().eq(2).children().children().css("height", "4rem");
$(datetimebox[i]).children().eq(2).children().first().css("width", "2rem");
$(datetimebox[i]).children().eq(2).children().eq(1).css("line-height", "4rem");
$(datetimebox[i]).children().eq(2).children().eq(1).css("font-size", "2.2rem");
$(datetimebox[i]).children().eq(2).children().eq(1).css("height", "4rem");
}
for(var i = 0;i<combox.length;i++){
$(combox[i]).children().first().css("width", "42%");
$(combox[i]).children().first().css("font-size", "2.2rem");
$(combox[i]).children().first().css("height", "4rem");
$(combox[i]).children().first().css("line-height", "4rem");
$(combox[i]).children().first().css("vertical-align", "middle");
$(combox[i]).children().eq(2).css("width", "53%");
$(combox[i]).children().eq(2).css("margin-left", "2%");
$(combox[i]).children().eq(2).css("height", "4rem");
$(combox[i]).children().eq(2).css("line-height", "4rem");
$(combox[i]).children().eq(2).css("vertical-align", "middle");
$(combox[i]).children().eq(2).children().children().css("height", "4rem");
$(combox[i]).children().eq(2).children().first().css("width", "2rem");
$(combox[i]).children().eq(2).children().eq(1).css("line-height", "4rem");
$(combox[i]).children().eq(2).children().eq(1).css("font-size", "2.2rem");
$(combox[i]).children().eq(2).children().eq(1).css("height", "4rem");
}
for(var i = 0;i<filebox.length;i++){
$(filebox[i]).children().first().css("width", "42%");
$(filebox[i]).children().first().css("font-size", "2.2rem");
$(filebox[i]).children().first().css("height", "4rem");
$(filebox[i]).children().first().css("line-height", "4rem");
$(filebox[i]).children().first().css("vertical-align", "middle");
$(filebox[i]).children().eq(2).css("width", "53%");
$(filebox[i]).children().eq(2).css("margin-left", "2%");
$(filebox[i]).children().eq(2).css("height", "4rem");
$(filebox[i]).children().eq(2).css("line-height", "4rem");
$(filebox[i]).children().eq(2).css("vertical-align", "middle");
$(filebox[i]).children().eq(2).children().children().css("height", "4rem");
$(filebox[i]).children().eq(2).children().children().children().css("font-size", "2.2rem");
$(filebox[i]).children().eq(2).children().children().children().css("width", "4rem");
$(filebox[i]).children().eq(2).children().children().children().css("line-height", "4rem");
$(filebox[i]).children().eq(2).children().children().children().css("height", "4rem");
$(filebox[i]).children().eq(2).children().first().css("width", "5rem");
$(filebox[i]).children().eq(2).children().first().css("height", "4rem");
$(filebox[i]).children().eq(2).children().eq(1).css("line-height", "4rem");
$(filebox[i]).children().eq(2).children().first().css("font-size", "2.2rem");
$(filebox[i]).children().eq(2).children().eq(1).css("height", "4rem");
}
for (var i = 0; i < btn.length; i++) {
//$(btn[i]).prev().hide();
//$(btn[i]).attr("display","true");
$(btn[i]).children().css("width", "7rem");
$(btn[i]).children().css("text-align", "center");
$(btn[i]).children().css("height", "3rem");
$(btn[i]).children().children().first().css("height", "3rem");
$(btn[i]).children().children().first().css('font-size', '2.5rem');
$(btn[i]).children().children().first().css("vertical-align", "middle");
$(btn[i]).children().children().first().css("line-height", "3rem");
}
for (var i = 0; i < radio.length; i++) {
$(radio[i]).prev().children('.panel-title').css("font-size", "2.2rem");
$(radio[i]).children().css("font-size", "2.2rem");
$(radio[i]).children().css("height", "3rem");
$(radio[i]).children().css("width", "8rem");
$(radio[i]).css("height", "5rem");
$(radio[i]).css("width", "100%");
$(radio[i]).parent().css("height", "10rem");
$(radio[i]).prev().css("width", "100%");
$(radio[i]).prev().css("font-size", "2.2rem");
$(radio[i]).prev().css("height", "3rem");
$(radio[i]).prev().css("line-height", "3rem");
$(radio[i]).prev().css("vertical-align", "middle");
$(radio[i]).children().css("width", "25rem");
$(radio[i]).children().children().first().css("height", "4rem");
$(radio[i]).children().children().first().css('font-size', '2.5rem');
$(radio[i]).children().children().first().css("vertical-align", "middle");
$(radio[i]).children().children().first().css("line-height", "4rem");
}
for (var i = 0; i < checkbox.length; i++) {
$(checkbox[i]).prev().children('.panel-title').css("font-size", "2.2rem");
$(checkbox[i]).children().css("font-size", "2.2rem");
$(checkbox[i]).children().css("height", "3rem");
$(checkbox[i]).children().css("width", "8rem");
$(checkbox[i]).css("height", "5rem");
$(checkbox[i]).css("width", "100%");
$(checkbox[i]).parent().css("height", "10rem");
$(checkbox[i]).prev().css("width", "100%");
$(checkbox[i]).prev().css("font-size", "2.2rem");
$(checkbox[i]).prev().css("height", "3rem");
$(checkbox[i]).prev().css("line-height", "3rem");
$(checkbox[i]).prev().css("vertical-align", "middle");
$(checkbox[i]).children().css("width", "25rem");
$(checkbox[i]).children().children().first().css("height", "4rem");
$(checkbox[i]).children().children().first().css('font-size', '2.5rem');
$(checkbox[i]).children().children().first().css("vertical-align", "middle");
$(checkbox[i]).children().children().first().css("line-height", "4rem");
}
}
function setDataGrid(sp, td_div, pageRow) {
for (var i = 0; i < sp.length; i++) {
$(sp[i]).css("font-size", "2rem");
$(sp[i]).css("width", "10rem");
$(sp[i]).css("height", "4rem");
$(sp[i]).parent().css("width", "10rem");
$(sp[i]).parent().css("line-height", "4rem");
$(sp[i]).parent().css("height", "4rem");
}
for (var i = 0; i < td_div.length; i++) {
$(td_div[i]).css("font-size", "2rem");
$(td_div[i]).css("width", "10rem");
$(td_div[i]).css("height", "3rem");
$(td_div[i]).parent().css("width", "10rem");
$(td_div[i]).css("line-height", "2rem");
$(td_div[i]).parent().css("height", "3rem");
$(td_div[i]).css("vertical-align", "middle");
}
for (var i = 0; i < pageRow.length; i++) {
$(pageRow[i]).children().css("font-size", "2rem");
$(pageRow[i]).children().css("width", "4rem");
$(pageRow[i]).parent().parent().parent().parent().css("margin-top", "-4rem");
$(pageRow[i]).children().css("height", "2.5rem");
$(pageRow[i]).parent().parent().parent().parent().css("height", "4rem");
//$(pageRow[i]).parent().parent().parent().parent().css("background","red");
;
}
}
}
</script>
</html>