将"onclick"应用于iFrame中的所有元素
在HTML中，onclick事件用于在单击元素时执行JavaScript代码。然而，onclick事件不能直接应用于iframe元素，因为iframe元素本身不支持onclick事件。
但是，您可以通过在iframe内部的文档中添加事件监听器来实现类似的效果。要实现这一点，您需要在iframe的内部文档中编写JavaScript代码。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<script>
function handleClick() {
alert('You clicked the iframe!');
}
window.onload = function() {
var iframe = document.getElementById('myIframe');
iframe.contentWindow.document.body.onclick = handleClick;
};
</script>
</head>
<body>
<iframe id="myIframe" src="iframeContent.html" width="300" height="200"></iframe>
</body>
</html>在这个示例中，我们首先创建了一个名为handleClick的函数，该函数将在单击iframe内的任何元素时执行。然后，我们在window.onload事件中获取iframe元素，并将其contentWindow.document.body.onclick属性设置为handleClick函数。这将使iframe内的所有元素都能触发handleClick函数。
请注意，由于同源策略，您只能在同一域上的文档中执行此操作。如果iframe的来源与包含iframe的页面不同，则无法直接访问iframe内部的文档。
相关·内容
2回答
这可能是很简单的事情。iframe来自与父页面相同的域。document.getElementById('my_iframe').onload = function() {
document.getElementById('my_iframe').contentWindow.document.getElementsByTagName(&#
浏览 0提问于2011-12-16得票数 0
回答已采纳
1回答
Overwolf应用程序： <div id="close" onclick="closeWindow();"></');"></div> <div id="slider"></div>
<&
浏览 0提问于2015-03-27得票数 1
我有一个父(主)页面，其中有一些iframe部分。我想将css样式应用到内部iframe元素。当我在谷歌上搜索它时，我发现许多帖子都与这个主题相关，但它们都建议使用jquery/javascript将CSS应用于内部元素。是否可以通过父窗口(主页) css类将CSS样式应用于内部iframe元素？
(所有iframe的域都与父域相同)
浏览 4提问于2013-11-08得票数 17
让我说我有一个代码<br /> <input type='text'>还有一种风格 border: 1px solid black;我希望这些样式只适用于iframe之外的元素。我想实现这样的
浏览 5提问于2016-04-25得票数 0
3回答
我想用ionic建立我的网页的移动版本。我计划这样做，在iframe上加载我的网页，视图如下：但问题是我想隐藏一些加载到iframe中的元素。我尝试将css类应用于iframe并关闭元素的可见性，但显
浏览 2提问于2014-11-15得票数 1
11回答
如何控制iframe中body元素的背景图像和颜色？注意，嵌入的body元素有一个类，iframe是属于我的站点的页面的一部分。之所以需要这样做，是因为我的站点为正文分配了黑色背景，然后为包含文本的div分配了白色背景。所见即所得编辑器在编辑时使用iframe嵌入内容，但它不包含div，因此文本很难阅读。iframe的主体在编辑器中有一个其他地方
浏览 1提问于2011-06-27得票数 200
回答已采纳
1回答
我在iframe中有一些页面内容。我还有一个包含一些用户选项的下拉菜单。在IE (9)中，当我打开下拉菜单时，它出现在iframe后面。在其他所有浏览器中，行为都是正确的(菜单显示在iframe的顶部)。
我已经尝试将各种z-index属性应用于这些元素，但都没有成功。它们共同的父元素只是一个<body>标记。
浏览 0提问于2012-11-09得票数 1
回答已采纳
我想将样式cursor:pointer应用于所有具有onClick函数的React元素。我知道我可以对每个元素都这么做：或者这样：
<a onClick={handleClick} className="someClassWithCursorPointe
浏览 0提问于2016-01-08得票数 23
我使用CSS代码将iframe隐藏在图像后面：iframe{border: 0px none transparent;top: 0px;height: 350px;}我在标题中插入了Google广告，但广告是看不见的，
浏览 0提问于2011-03-27得票数 0
回答已采纳
1回答
在应用程序中，我在iframe中有内容可编辑的元素，并希望将内联CKEditor应用于这些元素。它可以工作，除非当我滚动iframe时，CKEditor工具栏不会随着它一起滚动。是否有一个特殊的标志或某种方法可以让工具栏滚动到iframe内容而不是父窗口？另外，我希望避免将CKEditor脚本添加到iframe中。
浏览 7提问于2013-10-17得票数 4
1回答
我正在尝试将在iframe的head中定义的CSS类应用于主文档中的元素。<div class="#iframe.cla
浏览 0提问于2012-08-27得票数 1
回答已采纳
我使用的是bootstrap，它使用jquery对话框。如果对话框的z-index设置为1或更多，则可以在独立脚本中正常工作。但是，当我在iframe中调用相同的脚本时。然后，该对话框显示在同一页面上其他元素的下方。奇怪的是，如果我试图关闭对话框，我无法关闭，因为半透明层似乎在对话框本身的顶部。 z-index:99999999 !important;我的库存很多！
更新澄清:
浏览 0提问于2014-03-06得票数 0
> </html>将js加载到外部的页面中。如何通过在iframe中使用<iframe>元素来选择<p>对象？
大多数web资源都使用“从中选择iframe中的父元
浏览 0提问于2014-07-18得票数 1
我有一个div，其中包含一堆带有相应css的标签，所有这些标签都需要移到iframe中。然而，当我这样做的时候，iframe版本看起来就不一样了。我已经将应用于父页面的这些部分的css复制到iframe的样式表中。但是，在设置div -> iframe边框的样式时，不清楚哪些样式应该应用于iframe<e
浏览 1提问于2013-02-01得票数 3
回答已采纳
3回答
我有一个无序列表，ul中的每个条目都有一个div。这个div使用jQuery加载一个html页面。我为ul提供的样式将应用于加载到div中的整个html。如何防止这种情况发生。我希望div的样式仅应用于其自身，而不应用于任何子代。L
浏览 0提问于2012-02-03得票数 2
回答已采纳
我尝试将fancyBox2应用于父元素中的iframe中的元素。因此，我想使用以下选择器：但是这个选择器不起作用。与之相反，下面的选择器是有效的：
$('#modal iframe').contents(
浏览 1提问于2015-03-20得票数 1
我应用了-webkit-transform: scaleX(-1);，但它只应用于视频元素，而忽略了所有其他元素，如div、image、iframe。
浏览 3提问于2014-09-15得票数 0
回答已采纳
3回答
我很纠结于一些代码，当我单击一个<p>元素时，它会更改iframe并删除.html文件中所有元素的类'active‘，然后将类'active’添加到单击元素中。但是，类'active‘从未被添加到单击元素中。JAVASCRIPT $('.iframe_settings').att
浏览 3提问于2017-12-05得票数 0
回答已采纳
如何将Onclick事件处理程序附加到所有SVG path元素？我已经在iframe中加载了我的SVG。我尝试使用下面的代码，但是click事件没有触发。$('path').click(function () { });<iframeid="frame" src="myFile.s
浏览 5提问于2013-04-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
