如何使用Javascript/JQuery将iFrame中创建的模式附加到不同域的父窗口中
使用Javascript/JQuery将iFrame中创建的模式附加到不同域的父窗口中可以通过以下步骤实现：
- 在iFrame中创建所需的模式或内容。可以使用HTML、CSS和Javascript来构建模式。
- 在iFrame中使用postMessage方法将模式或内容发送给父窗口。postMessage方法允许在不同域之间进行安全的跨窗口通信。
- 在iFrame中使用postMessage方法将模式或内容发送给父窗口。postMessage方法允许在不同域之间进行安全的跨窗口通信。
- 这里的'https://父窗口域名'是指父窗口的域名，确保与父窗口的域名完全匹配。
- 在父窗口中监听消息事件，以接收来自iFrame的消息。
- 在父窗口中监听消息事件，以接收来自iFrame的消息。
- 这里的'https://iFrame域名'是指iFrame的域名，确保与iFrame的域名完全匹配。
- 在父窗口中处理接收到的消息。可以根据接收到的消息内容进行相应的操作，例如将模式或内容附加到父窗口中的特定位置。
- 在父窗口中处理接收到的消息。可以根据接收到的消息内容进行相应的操作，例如将模式或内容附加到父窗口中的特定位置。
- 这里的'#父窗口元素ID'是指父窗口中要附加模式或内容的元素的ID。
需要注意的是，由于涉及到跨域通信，确保在父窗口和iFrame中都进行了相应的安全设置，以防止恶意代码的注入和攻击。
推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），用于加速静态资源的传输和分发，提高网站的访问速度和用户体验。产品介绍链接地址：https://cloud.tencent.com/product/cdn
相关·内容
1回答
我正在将一个iframe加载到一个页面中，该页面上的jquery中断了，不再起作用。这是有原因的吗？我在iframe中调用了jquery，但是即使我删除了jquery调用，父框架的jquery仍然不起作用。iframe来自不同的域，iframe中的<
浏览 0提问于2012-05-10得票数 0
2回答
如何完全从父窗口作用域捕获iframe中的ajax事件？使用jquery还是普通的javascript？例如，父窗口中的代码是，<iframe class="childframe" src="http://localhost/ajax-page.php">
浏览 0提问于2014-03-22得票数 0
我正在尝试将一个位于iFrame中的模式附加到包含iFrame的父级。棘手的部分是，由于不同的域，它们违反了跨域策略。我已经能够绕过它，通过在Javascript中使用postMessage()来调整iFrame高度： let currentContentHeight = $('ht
浏览 8提问于2019-09-12得票数 0
我在iframe中使用setInterval，我需要能够在父窗口中阻止它，但它似乎不起作用。我将一个全局变量('modelViewRefresh')赋值给要从父级访问的setInterval事件。我在父进程中使用此代码来尝试触发clearInterval，但它似乎不起作用：
var modelViewRefresh = document.getElementById(widget_id + '_iframe</em
浏览 0提问于2015-09-25得票数 1
2回答
如何制作动态iFrame的高度？
、、、、
我正在尝试使动态iFrame高度，以适应页面的内容。我将"example.html“作为iFrame插入到"index.php”中，"example.html“中的内容高度是可变的。这是我在"index.php“中的代码
<iframe src="example.html" name=&quo
浏览 0提问于2013-11-14得票数 0
它通过使用javascript书签将自身作为iFrame加载到当前窗口中：我尝试过使用跨域消息发布。我有从父窗口到子iFrame的跨域发布，但是从iFrame</em
浏览 3提问于2013-03-23得票数 1
回答已采纳
我有来自另一个服务器/域的带有OpenX广告的iframes服务器。无论如何，主站点是否能以某种方式检测到iframe中的url没有响应，并跳过加载iframe并显示站点的其余部
浏览 0提问于2010-12-17得票数 0
回答已采纳
我读过关于"“的文章，并理解在IFRAME中修改父窗口的JavaScript变量是可能的。
我
浏览 1提问于2015-07-27得票数 8
回答已采纳
2回答
当jQuery库仅包含在父窗口中时，是否可以从iframe访问它？我有一个加载(有时是数百个)iframe的父窗口。在每个iframe中，我想执行一些jQuery函数。只有当我在每个iframe中定义lib时，我才能让它工作，使用：
<script src="/jquery.min.js" type="
浏览 1提问于2013-10-28得票数 0
我正在使用一个服务，创建一个表单，我加载到我的网站在一个iframe。我可以在表单加载时将定制的javascript加载到iframe中(我将javascript添加到服务域中的表单创建者中)。我认为函数必须使用参数"form“和" function”的或one。就像这样：
function
浏览 4提问于2014-07-02得票数 0
回答已采纳
2回答
我使用的是一个jQuery灯箱演进插件，并且我在iframe中有照片链接。我想让那个Lightbox在iframe外打开，在父窗口里。在FAQ中，我发现我可以将一些代码放在parent上： function frameload(iframe) {
var doc所以我没有‘初始化’head标签
浏览 0提问于2012-10-23得票数 1
因为不是每个人都需要在他们的文章中上传图片，我需要在必要时动态加载这个图片上传程序。我必须加载它在一个iframe，因为上传器需要一些外部脚本加载提前。因为我需要回调变量供我的编辑器使用，所以我想知道iframe中的脚本是否可以与主页中的脚本交互。或者，如果我不能做到这一点，还有什么替代方法呢？
浏览 0提问于2011-09-21得票数 5
回答已采纳
1回答
我在iframe中运行javascript代码，它来自与父窗口不同的域。由于安全考虑(跨越域)，我很难在窗口中检测到帧的位置。但是，我发现如果我在框架中将一个事件附加到window.mousemove，我可以得到窗口的ScreenX/Y和事件的ScreenX/Y，这让我很好地了解了浏览器窗口左上角的偏移量，这对我来说足够接近-
浏览 3提问于2012-08-20得票数 3
我控制着父页面和子页面，但是它们将被加载到不同的域(实际上，其中一个将是http和其他https)。在iframe中，我有一个函数，它将在文档加载时运行，然后定期获得文档的高度，并将其设置为URL片段的值(例如，类似于)
在父窗口中，我有一个函数，它将定期检查iframe的URL，获取散列表，解析出高度最大的问题是: iframe没有与其相关
浏览 7提问于2011-04-18得票数 1
回答已采纳
使我的情况不同的是，我的iframe来自一个不同于顶部窗口的域。他们使用相同的主机，但协议不同。iframe在https下服务，而顶部窗口在http下服务。( @Dmitry)说要使用顶部窗口中的jQuery对象打开对话框。access property 'jQuery'
浏览 1提问于2014-02-12得票数 0
回答已采纳
我可以从iframe激发父窗口范围内的事件并进行侦听，但不能从iframe范围内的iframe激发事件并在父窗口中侦听它。例如，在父窗口中，我有一个iframe和一些jquery代码来监听在它的主体中触发的事件
<iframe id="myframe" src="/
浏览 1提问于2013-05-05得票数 2
回答已采纳
为了在包含许多参数的表单中发布AJAX表单，我使用的解决方案是创建一个iframe，通过POST将表单发布到它，然后访问iframe的内容。具体来说，我访问的内容如下：我测试过了，结果成功了。据我所知，如果iframe是从同一个域提供的，则不应
浏览 11提问于2008-09-30得票数 26
回答已采纳
我想应用css到谷歌日历iframe。不过，我也尝试过
获得了成功，但它的许多链接到404页面，因为它以我的域名为基础URL
浏览 3提问于2014-06-12得票数 0
我正在使用jquery漂亮的照片2.5.3，我想知道当iframe内的图像链接被选中时，我如何才能让灯框显示在iframe的父窗口中？下面是我的代码：<html> <script src="js/jquery-1.3.2.min.j
浏览 2提问于2009-09-27得票数 1
回答已采纳
1回答
我已经开发了一些在页面上呈现iframe的javascript代码。在框架内部，它加载了各种社交网络的API，比如facebook，twitter，linked in等。它基本上是网站的一个工具，允许用户登录到他们的社交网络。我还创建了一个简单的jQuery插件，将此iframe加载到模式弹出窗口中。问题是:主iframe加载到站点上，但开发人员也希望在同一页面上
浏览 2提问于2011-10-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
