iframe引入页面

将外层css框架单独存放在一个css文件之中,将iframe的css单独写在一个css文件,避免iframe中的html,body等公共部分的样式冲突. 外层框架单独写在一个css,如: frame.css 引入页面的css单独写在一个文件,如: content.css frame.html如下,只引入frame.css <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti…

获取iframe引入页面内的元素

在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素.js在父窗口中获取iframe中的元素1. 格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 实例:window.frames["ifm"].document.getElementById(&…

jQuery 获取jsp页面中用iframe引入的jsp页面中的值

使用iframe父页面调用子页面和子页面调用父页面的元素与方法

在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面获取子页面的元素 //jquery方式 $("#iframeId").contents().find("#child1"); //js方式 window.frames["iframName"].document.getElementById(&quo…

解决SpringSecurity限制iframe引用页面的问题

使用Spring Security的过程中,需要使用iframe来引入其他域的页面,页面会报X-Frame-Options的错误,试了好几种方法一直未能很好的解决这个问题. 这里涉及到Spring Security的一个配置,Spring Security下,X-Frame-Options默认为DENY,非Spring Security环境下,X-Frame-Options的默认大多也是DENY,这种情况下,浏览器拒绝当前页面加载任何Frame页面,设置含义如下: DENY:浏览器拒绝当前页面加…

使用iframe引入公共模块

新建一个公共文件head.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>头部</title> <style> body { box-sizing: border-box; margin: 0; } .header { width: 100%; height: 90px; float:…

Saiku使用iframe嵌入页面访问地址配置化（二十八）--DWR的基本使用

Saiku使用iframe嵌入页面使用时ip与端口配置化(二十八)--DWR的基本使用 DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA方法,就像它就在浏览器里一样. 这里做的一个需求是将saiku的访问url配置化,放到配置文件里,然后在jsp页面里就不直接写saiku的url了. 1.在配置文件 config.pro…

在vue项目中通过iframe引入jquery项目

最近公司因为原来的jq框架存在的问题太多,所以要进行主题框架的重新搭建,我使用的vue进行的主题框架的重新搭建,但是原来的页面已经完成很多了,而且都是使用的jquery进行开发的在vue中引入jquery项目的关键就是在组件中通过iframe进行引入,在开发的时候把原来的jquery放在public文件夹下,在通过iframe引入的时候的地址使用绝对路径的方法,而路径的根目录就是public,其余的配置按照正常的vue项目开发,进行路由的配置 static是放在public文件夹下的在对if…

前端错误监控上报公共方法，可在父页面及iframe子页面同时使用

先创建公共文件error-reported.js 内容如下: /** * 获取前端错误信息进行上报 * @param iframe */ function catchError (iframe) { var _this = this var source = '来自外层框架错误信息:' if (iframe) { _this = iframe.contentWindow source = '来自iframe内部错误信息:' } _this.addEventListener('error', fu…

父子页面之间元素相互操作(iframe子页面)

js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() { var oIframe = window.frames["oIframe"].document.getElementById("getFrame"); console.log(oIframe); } 注意:此处一定要加上window.onload或者DOMConte…

js之iframe子页面与父页面通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.w…

Js动态获取iframe子页面的高度////////////////////////zzzz

Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结问题的缘由产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度给元素设置高度这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置高度涉及了一些兼容问题: IE用attachEvent | 3C用onload来判断子页面是否加载完成. IE用contentWindow | 3C用contentDocument来获取子页面 IE用documen…

iframe父页面获取子页面的高度

最近做项目中用到了iframe,子页面更改父页面的高度,经过九九八十一难,找到了解决的办法. $(window).load(function() { var h=$(document).height(); var ifHeight = $(window.top.document).find(".XX").css({ height:h }); }); window.top:是获取子页面所有body以上的元素. window.parent()是获取子页面body的上一级父元素.…

jquery读取iframe子页面和父页面的处理

1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面获取iframe子页面的元素代码如下: $("#objid",document.frames('iframename').document) 3.js 在iframe子页面获取父页面元素代码如下: indow.parent.document.getElementByIdx_x("元素id");…

在浏览器中使用jquery取得iframe中页面中指定元素的值的不同

自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(window.frames["yourframename"].document).find("#yourelementid")的形式,这个是在调试页面的时候在ie和chrome的开发者工具试过的. 2. 在ascx页面写的时候,和ascx的包含页面(iframe包含的是ascx…

微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab…

JQuery调用iframe父页面元素与方法

JQuery操作iframe父页面与子页面的元素与方法下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在iframe中调用父页面中定义的方法和变量: parent.method parent.value 第四.…

iframe父子页面互调方法和属性

1.iframe子页面调用父页面js函数子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签中的值,比如该标签的id为“test”,则: window.parent.document.getElementById("test").value; jQuery方法为: $(window.parent.document).contents().find("test"…

Iframe父页面与子页面之间的调用

原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用专业词语解释如下: Iframe:iframe元素是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. conte…

iframe子页面调用父页面javascript函数的方法

1.iframe子页面调用父页面js函数子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面调用子页面js函数这个就稍微复杂一些,下面的方法支持ie和firefox浏览器: document.getElementById('ifrtest').contentWindow.b();…

JS的组成部分、引入页面的方法以及命名规范

JS的组成部分.引入页面的方法以及命名规范一.页面是由三部分组成 1)html标签(超文本标记语言) 2)css样式(层叠样式表) 3)javascript脚本编程语言(动态脚本语言) 二.将css引入到页面中的几种方法 (4种) 1)行内样式:直接在元素标签上编写样式 2)内嵌样式:在页面的样式表中通过css选择器,找到对应的元素给它设置样式 3)外链样式:把样式文件写在一个外部的文件中,然后在本页面中通过link标签把它引入当前页面中 <link type="text/css&q…

JQuery操作iframe父页面与子页面的元素与方法

JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在iframe中调用父页面中定义的方法和变量: parent.method pa…

IFrame父页面和子页面的交互

现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面提供了四中方法来操作iframe里面的dom: a. contentWindow: 以window对象返回iframe中的文档,所有主流浏览器都支持. 用法: // 获取id为iframeId的子页面中的div01元素 document.getElementById('iframeId').cont…