"本文讲述了如何在父页面通过IFrame向子页面的jsonTreeViewer插件传递参数，重点讲解了`$("#show_json")[0].contentWindow.show_json(content)`的使用和DOM操作技巧。作者分享了自己的经验和解决踩过的坑，适合前端开发者遇到类似问题时参考。"
系统有一个日志记录用户的访问传参和返回结果
像返回结果 是一个json字符，如果不做格式化处理看起来真的很费力
github上的项目
https://github.com/summerstyle/jsonTreeViewer
下载文件后打开html
功能很多，很多都是用不到的，先精简一下，去掉多余的功能，代码放到后台很尴尬，js有冲突。
无奈只能iframe嵌套页面。
嵌套的页面代码很简单
<!DOCTYPE html>
<html>
<head>
<title>jsonTreeViewer</title>
<meta charset="utf-8" />
<link href="libs/app/reset.css" rel="stylesheet" />
<link href="libs/app/app.css" rel="stylesheet" />
<link href="libs/jsonTree/jsonTree.css" rel="stylesheet" />
</head>
<body >
<div id="tree"></div>
<script src="libs/app/App.js"></script>
<script src="libs/jsonTree/jsonTree.js"></script>
<script src="jsonTreeViewer.js"></script>
<script>
function show_json(example){
jsonTreeViewer.parse(example);
}
</script>
</body>
</html>问题是父页面怎么向这个嵌套页面传递参数。
关于这个问题很多网站都是瞎抄袭，都是过时的东西.
我这里直接贴上实践后的代码
<div class="modal fade" id="show_json_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">JSON格式化</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe id="show_json" style="border: 0; width: 100%; min-height: 360px;" src="/admin/json/index.htm"></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="submit" class="btn btn-success">保存</button>
</div>
</div>
</div>
</div>
<script>
$("#datatables-dashboard-projects").delegate('.result',"click",function (){
var content = $.trim($(this).text());
if(!isNaN(content)){
return false;
}
$("#show_json")[0].contentWindow.show_json(content); /*调用子页面方法*/
var obj=$("#show_json").contents().find("ul.jsontree_child-nodes:first"); /*第一个可点击的li*/
click_s(obj);
$("#show_json_modal").modal('show');
});
function click_s(obj){
if(obj.length>0){
obj=$(obj).find("li.jsontree_node_complex:first");
if(obj.length>0){
$(obj).children(':first').children(':first').trigger("click"); /*触发点击事件*/
var obj_1=$(obj).children().eq(1).find("ul.jsontree_child-nodes:first");
if(obj_1.length>0){ /*还有可点击的子节点 递归处理*/
var obj_1=$(obj_1)
click_s(obj_1);
}
}
}
}
</script>
这是一个 modal 模态框
显示效果
最核心的代码
$("#show_json")[0].contentWindow.show_json(content); /*调用子页面方法*/网上的大部分资料都没有$("#show_json")后面的 [0] 经过我的反复测试 这个 [0] 这个是必须要有的。
console.log($("#show_json")); 追踪的结果显示
$("#show_json")的结果集是一个数组对象，其中的第0个元素才是iframe本身
在这个问题上浪费了整整一个下午的时间，也是写这篇文章的原因，愿后来人能不踩这个坑。
后面业务人员要求增加自动展开第一个折叠签以及其下面的第一个折叠签，递归到数据最深处。
var obj=$("#show_json").contents().find("ul.jsontree_child-nodes:first"); /*第一个可点击的li*/
click_s(obj);就是这两句代码。问题的核心就是，父页面的jq怎么去操作子页面的dom节点。
如果没有contents() 这个方法 jq是无法穿透到子页面的。
最后上传嵌套页面的所有代码
下载json格式化输出插件
引用iframe的代码我贴的只是部分页面，大家就各自量身裁衣了。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
