开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何强制iframe中的提交按钮在父窗口中打开

在父窗口中打开iframe中的提交按钮，可以通过以下步骤实现：

首先，在父窗口中获取到iframe元素的引用。可以使用JavaScript的document.getElementById()方法或其他选择器方法获取到iframe元素的引用。
接下来，通过获取到的iframe元素引用，访问其contentWindow属性，获取到iframe的window对象。
使用获取到的iframe的window对象，可以通过JavaScript操作iframe中的元素。可以通过document.getElementById()等方法获取到iframe中的提交按钮元素。
一旦获取到了iframe中的提交按钮元素，可以使用JavaScript的addEventListener()方法为按钮添加点击事件监听器。
在点击事件监听器中，使用window.open()方法打开新的窗口，即在父窗口中打开链接。可以通过设置第二个参数为"_blank"来指定在新窗口中打开链接。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>父窗口</title>
  <script>
    window.onload = function() {
      var iframe = document.getElementById("myIframe");
      var iframeWindow = iframe.contentWindow;
      var submitButton = iframeWindow.document.getElementById("submitButton");
      
      submitButton.addEventListener("click", function() {
        window.open(submitButton.getAttribute("href"), "_blank");
      });
    };
  </script>
</head>
<body>
  <iframe id="myIframe" src="iframe.html"></iframe>
</body>
</html>

在上述示例代码中，父窗口中的JavaScript代码会在页面加载完成后执行。它获取到了id为"myIframe"的iframe元素，并通过contentWindow属性获取到了iframe的window对象。然后，通过获取到的window对象，获取到了iframe中的提交按钮元素，并为其添加了点击事件监听器。当点击提交按钮时，会使用window.open()方法在父窗口中打开按钮的链接。

请注意，这只是一个示例代码，具体实现方式可能会因实际情况而有所不同。

相关搜索:在GitAhead中，如何从特定的提交中打开单个文件？在outlook web addin - js中单击“发送”按钮时，如何打开任务窗格？在VScode中，如何在窥视窗口中打开光标下的文件？在Wordpress中创建iframe在父窗口中打开链接在使用父组件中的保存按钮提交数据之前，如何验证来自父组件和子组件的用户输入？在子组件中提交表单后如何刷新父组件中的graphql查询？在父iFrame中打开按钮目标在父窗口的iframe中打开链接在表单中单击提交按钮后，如何打开特定的网页？如何从iframe按钮submit填充父页面中的文本输入？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Web前端开发HTML笔记

标签对之间的内容,将显示在Web浏览器窗口的用户区域,它是HTML文档中最主要的部分在body标签中可以规定整个文档的一些基本属性,例如以下几个属性....vlink 指定HTML文档中,已链接超链接对象的颜色 background 指定HTML文档中,文档的背景文件特殊字符在HTML中有很多特殊的符号是需要特别处理的,例如这两个符号是用来表示标签的开始和结束的...: (1) _blank在一个新的窗口中打开链接 (2) _seif(默认值)在当前窗口中打开链接 (3) _parent在父窗口中打开页面（框架中使用较多） (4) _top在顶层窗口中打开文件...（框架中使用较多）超链接瞄点: 使用超链接瞄点,如下例子寻找页面中id=i1的标签,将其标签显示在页面顶部....post和get两种方式 get方式: get方式提交时,会将表单的内容附加在URL地址的后面,且不具备保密性 post方式: post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理

2.2K2 0

实现iframe父窗体与子窗体的通信

本文主要会介绍如何基于MessengerJS，实现iframe父窗体与子窗体间的通信，传递数据信息。同时本文会提供一个可运行的实例代码，实现在父窗体中，获取到来自子窗体的数据的效果。...1.2 使用方法 (1) 在需要通信的父窗体、和子窗体的文档中，都需要引入MessengerJS。...对象的名字： // 父窗口中 - 添加消息对象, 明确告诉父窗口iframe的window引用与名字 messenger.addTarget(iframe1.contentWindow, 'iframe1...['iframe2'].send(msg2); // 父窗口中 - 向所有目标iframe广播消息 messenger.send(msg); 2.实例基于上面的介绍，下面要实现开篇提出的需求了（实例代码只是示例如何传递数据...这里分别是父窗体和子窗体的代码实现，可直接在浏览器中打开查看效果，其中messenger.js可以在这里下载，放到项目目录下。父窗体： <!

9.7K77 1

41个Web开发者都收藏的实用代码

在文件的根目录放进去这个图片，后缀修改成ico就可以了可以在收藏夹中显示出你的图标在打开的子窗口刷新父窗口的代码里如何写...window.opener.location.reload() 如何设定打开页面的大小打开页面的位置在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 body {background-image:none; background-repeat...跳到按钮后,最好能直接按"回车"进行数据的提交.因此,对上面的方法要进行一下修改,应该对于"提交"按钮不进行焦点转移.而直接激活提交.

2K3 0

41个Web开发者都收藏的实用代码

="post" action="mailto:****@***.com" enctype="text/plain"> 25.在打开的子窗口刷新父窗口的代码里如何写...window.opener.location.reload() 26.如何设定打开页面的大小打开页面的位置 27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 body {background-image...– if(event.keyCode==13) event.keyCode=9; –> 这样的处理方式,可以实现焦点往下移动,但对于按钮也起同样的作用,一般的客户在输入完资料以后,...跳到按钮后,最好能直接按"回车"进行数据的提交.因此,对上面的方法要进行一下修改,应该对于"提交"按钮不进行焦点转移.而直接激活提交.

2.4K3 0

Note丨记41条Web程序员日常使用的代码！

IE 地址栏前换成自己的图标在文件的根目录放进去这个图片，后缀修改成ico就可以了 6.可以在收藏夹中显示出你的图标...method="post" action="mailto:****@***.com" enctype="text/plain"> 25.在打开的子窗口刷新父窗口的代码里如何写...window.opener.location.reload() 26.如何设定打开页面的大小打开页面的位置 27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 body {background-image...跳到按钮后,最好能直接按"回车"进行数据的提交.因此,对上面的方法要进行一下修改,应该对于"提交"按钮不进行焦点转移.而直接激活提交.

1.1K8 0

41个Web开发者都收藏的实用代码

IE 地址栏前换成自己的图标在文件的根目录放进去这个图片，后缀修改成ico就可以了 6.可以在收藏夹中显示出你的图标...method="post" action="mailto:****@***.com" enctype="text/plain"> 25.在打开的子窗口刷新父窗口的代码里如何写...window.opener.location.reload() 26.如何设定打开页面的大小打开页面的位置 27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 body {background-image...跳到按钮后,最好能直接按"回车"进行数据的提交.因此,对上面的方法要进行一下修改,应该对于"提交"按钮不进行焦点转移.而直接激活提交.

9183 0

总结收藏的41个JavaScript实用技巧

可以在收藏夹中显示出你的图标关闭输入法永远都会带着框架...post” action=”mailto:sunjianfeng@csxiaoyao.com” enctype=”text/plain”> 在打开的子窗口刷新父窗口的代码里如何写...window.opener.location.reload() 如何设定打开页面的大小打开页面的位置在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 body {background-image:none; background-repeat...,可以实现焦点往下移动,但对于按钮也起同样的作用,一般的客户在输入完资料以后,跳到按钮后,最好能直接按”回车”进行数据的提交.因此,对上面的方法要进行一下修改,应该对于”提交”按钮不进行焦点转移

1.5K1 0

HTML入门的简单学习

，作用：定义超链接的打开方式 _blank:在一个新的窗口中打开链接 _self(默认值)：在当前窗口中打开链接 _parent:...在父窗口中打开页面，框架中使用较多 _top:在顶层窗口中打开文件，框架中使用较多案例运行如下 1 2 3 <meta http-equiv=...的区别　　　　1：frame不能脱离frameset单独使用，iframe可以　　　　2：frame不能放在body中，iframe可以　　　　3：iframe是被嵌入在网页的元素，而frame...方法提交时，会将表单的内容附加在url地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性 post方式，提交时，将表单中的数据一并包含在表单主体中... 8.3：提交，重置(恢复至初始值，不是清空，name可以验证效果)，普通按钮提交按钮：当时，为提交按钮重置按钮：当

4.1K10 0

window location href页面跳转的几种用法及其延展「建议收藏」

;//当前页面打开URL页面 location.href;// 当前页面打开URL页面 parent.location.href;//在父页面打开新页面 top.location.href;//在顶层页面打开新页面...如果页面中自定义了frame，那么可将parent、self、top换为自定义frame的名称,效果是在frame窗口打开url地址。...然而 window,open()不一定是打开新窗口在有窗口的名称和window.open中第二个参数中的一样就会将这个窗口替换，用这个特性的话可以在iframe和frame中来代替location.href...而top是指向顶级窗口对象，parent是指向父级窗口对象。延展 window.location或window.open如何指定target?...()是可以在一个网站上打开另外的一个网站的地址 window.location()是只能在一个网站中打开本网站的网页本文参考互联网上多篇博客编辑修改完成，展示出来供大家参考使用发布者：全栈程序员栈长

4.9K1 0

JS之浏览器对象BOM

对象 Window 对象表示浏览器中打开的窗口，如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window...对象 window.frames 返回窗口中所有命名的框架 parent是父窗口（如果窗口是顶级窗口，那么parent==self==top） top是最顶级父窗口（有的窗口中套了好几层frameset...或者iframe） self是当前窗口（等价window） opener是用open方法打开当前窗口的那个窗口 ①：父子窗体之间的通讯在页面内嵌入一个iframe，在iframe中提供一个输入项，输入后...，在iframe外面窗口中显示内容显示结果如上图所示，实现思路如下：子窗体：2.html <iframe src="2

2.8K9 0

JavaScript中window.open（）和Window Location href的区别

;//当前页面打开URL页面 location.href;// 当前页面打开URL页面 parent.location.href;//在父页面打开新页面 top.location.href;...只要有窗口的名称和window.open中第二个参数中的一样就会将这个窗口替换，用这个特性的话可以在iframe和frame中来代替location.href。...：在框架内指定页面打开连接 window.location或window.open如何指定target?...","_top"); 5：是否打开其他网站地址 window.open()是可以在一个网站上打开另外的一个网站的地址而window.location()是只能在一个网站中打开本网站的网页 window.open...10：【在弹出窗口中加上一个关闭按钮】呵呵，

2.2K5 1

BI仪表板数据可视化大屏

URL集成的核心是生成被集成报表或仪表板的完整URL。以仪表板为例： (1)在新窗口打开仪表板选择仪表板，单击页面右上角的新窗口按钮，在新的浏览器窗口中打开仪表板。...字串将该URL字串设置为业务系统页面文件中某个iframe的src属性或者超链接的href属性。...，通过浏览器调试窗格就可以看到实际的GraphQL API调用。...提交数据的格式和内容，可通过浏览器调试功能，查看界面操作中的网络交互（Network），再查看具体的请求头信息（Headers）。...在浏览器中打开 http://localhost:51980/graphiql 网页（注意URL末尾的graph与ql之间有一个字母i），可随时调试API，如下图： image.png 接下来我们再来演示如何在

8.2K1 0

当.Net撞上BI可视化，这3种“套路”你必须知道

URL集成的核心是生成被集成报表或仪表板的完整URL。以仪表板为例： (1)在新窗口打开仪表板选择仪表板，单击页面右上角的新窗口按钮，在新的浏览器窗口中打开仪表板。...字串将该URL字串设置为业务系统页面文件中某个iframe的src属性或者超链接的href属性。...，通过浏览器调试窗格就可以看到实际的GraphQL API调用。...提交数据的格式和内容，可通过浏览器调试功能，查看界面操作中的网络交互（Network），再查看具体的请求头信息（Headers）。...在浏览器中打开 http://localhost:51980/graphiql 网页（注意URL末尾的graph与ql之间有一个字母i），可随时调试API，如下图：接下来我们再来演示如何在ASP.NET

3.1K2 0

php layer弹出层更改背景,详解Layer弹出层样式

比如如何用layer打开一个新的网页，content直接为一个网址就可以了，但是在你的项目中，这个网址又是啥??HTML的直接路径? 相对路径??都不是!!...layer如何获取父界面的元素，比如我点击新增按钮，在layer框编辑后提交，是如何关闭当前layer框，额，关闭layer框很简单，但是如何关闭后根据父界面的form表单向后台发起Ajax请求，，刷新信息...即：layer子界面如何调用父界面的方法。如果你不想使用Layui，而只是想使用layer，你可以去layer独立组件官网下载组件包。...当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如： //页面一打开就执行弹层 layer.ready(function(){ layer.msg(‘很高兴一开场就见到你’);...body.find(‘input’).val(‘Hi，我是从父页来的’) } }); layer.getFrameIndex(windowName) – 获取特定iframe层的索引此方法一般用于在

3.9K2 0

JavaScript中window.open（）和Window Location href的区别「建议收藏」

10：【在弹出窗口中加上一个关闭按钮】 11：打开新页面 ---- 1：window.location.href的用法： self.location.href;//当前页面打开URL页面 window.location.href...//在父页面打开新页面 top.location.href;//在顶层页面打开新页面 2:window.open()的用法 open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。...只要有窗口的名称和window.open中第二个参数中的一样就会将这个窗口替换，用这个特性的话可以在iframe和frame中来代替location.href。...：在框架内指定页面打开连接 window.location或window.open如何指定target?...10：【在弹出窗口中加上一个关闭按钮】

4.2K2 0

layer弹出层详解

比如如何用layer打开一个新的网页，content直接为一个网址就可以了，但是在你的项目中，这个网址又是啥??HTML的直接路径? 相对路径??都不是!!...layer如何获取父界面的元素，比如我点击新增按钮，在layer框编辑后提交，是如何关闭当前layer框，额，关闭layer框很简单，但是如何关闭后根据父界面的form表单向后台发起Ajax请求，，刷新信息...即：layer子界面如何调用父界面的方法。如果你不想使用Layui，而只是想使用layer，你可以去layer独立组件官网下载组件包。...当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如： //页面一打开就执行弹层 layer.ready(function(){ layer.msg('很高兴一开场就见到你')...(windowName) – 获取特定iframe层的索引此方法一般用于在iframe页关闭自身时用到。

5.1K2 0

PHP使用反向Ajax技术实现在线客服系统详解

一般用于“在线客服”、“消息推送”、“即时通信”等功能中，比如新浪微博的私信功能，就是客户端不断的请求服务器并创建连接，去查看服务器有没有返回的信息，建立连接比较浪费服务器资源，下面我将根据客户端创建连接的不同性来介绍一下实现反向...在线客服系统实现思路：（1）咨询用户端发出问题，把问题存入数据库，把咨询内容显示到客服人员的聊天窗口中（2）客服人员看到聊天窗口后，选择咨询用户，进行回复，然后把回复内容显示到客服人员窗口中...页面中主要有一个div，用于显示聊天信息，还有一个隐藏的iframe标签，这个iframe实现反向Ajax模型，用于发送长时连接，当服务器有数据时，服务器将调用comet()方法，此方法显示咨询内容，choose...客户人请求咨询信息（16-kefu-iframe.php）主要功能是保持连接永不断开，然后不断的从数据库读取一条未读的咨询消息，如果有消息，先设置该消息为已读，返回js脚本，影响iframe的父窗体...当页面加载就发出一条ajax请求，如果该请求有数据返回，则显示到聊天窗口中，延时1s后重新发送请求，如果点击咨询，就发出ajax请求将咨询内容写入数据库中。 <?

1.6K4 1

Chrome下的打开新窗口

> 4、form表单提交，同样target也必须设为_blank 现在遇到一个需求：做了一个后台运维管理系统，在点击datagrid头部一个按钮，需要打开一个新窗口...因为extjs运行效率比较低，所以选择使用chrome访问系统，而在操作些按钮的时候发现很多很奇特的现象，这些现象只出现在chrome中： 1、打开一个窗口后，些窗口不关闭，将无法打开多个窗口，即使原有窗口关闭...打开窗口的方式：window.open、form提交、iframe--表现上一致 2、页面中原本就有一个form，每次操作就修改里面一个参数，设置其值为随机数，亦不行改用window.open还发现一个问题...，就是弹出的窗口是没有工具栏和地址栏的，且不在新选项卡中打开后来搜索到一篇文章，有所启发，就有了如下的代码： var nwin = window.open(); nwin.location = ‘xxxx...’;//需要打开的地址如果使用ajax请求地址后面的参数的话，需要将ajax改为同步，不然弹出的窗口会在新窗口中打开，而且没有工具栏和地址栏的

3.5K3 0

HTML基础知识

单标签：在开始标签中进行关闭（以开始标签的结束而结束）。 HTML的全局标准属性在HTML中，规定了8个全局标准属性。 class用于定义元素的类名。 id用于指定元素的唯一id。...onchange，在元素的元素值被改变时触发。 onfocus，在元素获得焦点时触发。 onreset，当表单中的重载按钮被点击时触发。 onselect，在元素中文本被选中后触发。...值说明 _self 在超链接所在框架或窗口中打开目标页面 _blank 在新浏览器窗口中打开目标页面 _parent 将目标页面载入含有该链接框架的父框架集或父窗口中 _top 在当前的整个浏览器窗口中打开目标页面...，用于为那些不支持框架集的浏览器显示文本，与元素相同，iframe有frame的属性，还加了height和width 代码：预留字符 HTML 中的预留字符必须被替换为字符实体。

2.6K2 2

bootstrap3-dialog打开嵌套iframe窗口

bootstrap3-dialog是一款第三方提示框插件，但是使用过程中感觉对打开新的远程页面不太友好，而打开表单嵌套在原页面中又显得代码非常臃肿，所以对bootstrap3-dialog进行二次封装...，在关闭事件后传递消息通知父级页面关闭dialog window.addEventListener('message', receiveMessage, false); function...dialog又打开就要关闭，我们不可能只通过x号关闭页面，我们还需要点击关闭，确定这些按钮来关闭页面，这样我们就需要在opener和dialog建立起联系，这里采用的是给页面的message事件注册监听...window.parent.postMessage('close', '*'); } 关于dialog的使用还有一个问题，如果在一个iframe中打开窗口，遮罩层和dialog都会以iframe...为基准，但有时候这样会显的窗口太小使用不方便，所以我们这里要再加一种方法，打开全局dialog，就是如果在iframe中打开，dialog要显示在iframe的顶级父级窗口中，这就需要我们对源码小小的改造下

3662 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭