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

时间: 2024-11-03 17:36:14

easyui dialog 中嵌入html页面的相关文章

Easyui dialog中嵌入iframe

如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body体间的html, 如果想加载把其他页面 加载进dialog的iframe中,属性就要改用content. 引用: <link href="../css/easyui.css" rel="stylesheet" type="text/css" /> <script src="../js/jquer

EasyUI中dialog中嵌入form细节问题记录

当代码如下: function myClear() { $("#add_form").form("reset"); $("#add_dialog").dialog("open"); } 在浏览器上会出现:请输入必填项的提示. 但是如果如下则不会出现 function myClear() { $("#add_dialog").dialog("open"); $("#add_for

C#开发中碰到的问题------easyUI 框架下dialog加载HTML页面不执行js问题

问题描述: easyUI 框架下,使用easyUI dialog加载HTML页面,HTML页面写在头部的js不会执行 解决办法: 将js写在body里 问题原因: 转[https://www.cnblogs.com/summer_adai/p/3548252.html] 原文地址:https://www.cnblogs.com/LiCoco/p/9117103.html

jquery数字打分插件与嵌入到EasyUI datagrid中的示例

这阵儿是断续折腾定性考评表打分的事儿了.虽是UI菜鸟,但却一直想让用户在操作上更加方便,之前基于"jQuery星级评分插件"实现了一个评分界面(因为比较简单,就不做总结了),用户反应还不错. 这一次的评分表中,各项分值的特点有:一是每个评分项的分值均不太一样:二是分值为整数,但分值范围大,从-1000到+1000都存在.若是采用在datagrid中嵌入编辑框的形式实现的话,总是觉得让用户使用不太方便,所以内心非常想做一个数字插件,然后就搜到中意的例子--"简单的jQuery用

在EasyUI的DataGrid中嵌入Combobox

在做项目时,需要在EasyUI的DataGrid中嵌入Combobox,花了好几天功夫,在大家的帮助下,终于看到了它的庐山真面: 核心代码如下: <html> <head> @*添加Jquery EasyUI的样式*@ <link href="@Url.Content("../../Content/JqueryEasyUI/themes/default/easyui.css")" rel="stylesheet" /

easyui的tab加载页面中的form重复提交

http://blog.csdn.net/fxz1982/article/details/8987769 Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者window这类的easyui组件中放了form.那么在关闭这个tab再次打开.如果进行form提交操作,后台就会收到两次提交请求,再次重复以上操作会收到3次提交请求,如果将表单serialize()后以jquery的post提交服务器将收到值全是数组方式组织的. 经分析发现,Easyui的tab加载页面

js在页面中嵌入pdf文件

由于项目需求,需要在jsp页面中嵌入PDF文件,在网上搜了很多方法,大部分是用<object>标签钱嵌入,发现并不好用. 这里介绍一个很好用的插件,PDFObject  https://pdfobject.com/ 由于用的是框架,所以我直接把pdfobjects.js的代码复制到了项目中,按照上面说的方法成功插入了pdf.

在easyui dialog的子页面内如何关闭弹窗

因项目需要在dialog中添加滚动条,所以就在div中加了iframe: 1 <div id="applyRefundDialog" style="display:none;overflow:hidden"> 2 <iframe id="applyframe" style="width: 100%; height: 100%;" scrolling="auto" frameborder=&

在页面中嵌入百度搜索框

呈现效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在页面中嵌入百度搜索框</title> <style> form { width: 500px; height: 50px; padding: 10px 20px 20px; text-align: center; line-height: 50px;