easyui dialog 中嵌入html页面

最近使用easyui比较多，这个插件确实很好用。在使用时也遇到了大大小小的问题，好在都一一解决了。

记录一下今天遇到的问题。

目的：用easyui的dialog嵌入一个html页面（html中仍有要执行的脚本内容）

方法一：

使用href属性，失败。

经过测试，如果easyui dialog的地址属性用href超链接，easyui 不会加载整个url页面，只会截取url目标页的body体间的html。

easyui官网上关于href属性的说明是：

属性href，类型string，一个URL，用它加载远程数据并且显示咋面板（panel）里。请注意，除非面板（panel）打开，否则内容不会被加载。这对创建一个惰性加载的面板（panel）很有用。

（惰性加载面板本人不太理解）

方法二：

使用content属性，成功。

html代码：

 

1 <div id="dialog"  class="easyui-dialog" closed="true"></div>

 

js代码：

1 $("#dialog").dialog({
2     title:'your title'，
3     width:1000,
4     height:600,
5     modal:true,
6     content:"<iframe scrolling='auto' frameborder='0' src='aaa.html' style='width:100%; height:100%; display:block;'></iframe>"
7 });
$("#dialog").dialog("open"); // 打开dialog

成功！

注意：用此种方式的时候，在html代码的<div>中必须写class="easyui-dialog"这个属性。否则会弹出很多错误。

2017-11-06 15:15:39

 

转载于:https://www.cnblogs.com/xiaobaodejimama/p/7793328.html