正文 

当前位置： 首页 > 源码 >

使用数据属性更改 iframe 内元素的 CSS

     2023-05-08     250

关键词：

【中文标题】使用数据属性更改 iframe 内元素的 CSS【英文标题】：Changing CSS of element inside an iframe using data attribute 【发布时间】：2021-06-18 12:14:52 【问题描述】：

我的 HTML 文档中有一个 iframe。此iframe 具有数据属性“data-search-id”，即“mainline-top”。如何在 iframe 之外使用 JavaScript 来更改具有类“base-top”的元素的颜色。我应该使用数据属性还是有其他方法？请注意，我无法将 id 或类添加到 iframe，它是从其他地方加载的。

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js "integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<body>

    <iframe data-search-id="mainline-top">
        
        <style>.base-topcolor: #red;</style>
        
        <div class="base-top">Stuff</div>

    </iframe> 

<script>
     $('.base-top.).css(color, "blue");
</script>

</body>
</html>

【问题讨论】：

iframe 来自另一个域，但我想我可以编辑它，我只需要使用 data 属性访问 iframe var iframe = document.querySelctor("[data-search-id='mainline-top']");或类似的东西？ “iframe 来自另一个域”。然后由于浏览器安全限制，您无法使用父页面中的脚本进入其中 【参考方案1】：

您可以在 iframe 中插入样式标签。

<iframe data-search-id="mainline-top" id="myIframe">
        
        <style>.base-topcolor: red;</style>
        
        <div class="base-top">Stuff</div>

    </iframe> 
<style type="text/css" id="mycss">.base-topcolor: blue;</style>
<script type="text/javascript">
    $(function () 
        $('*[data-search-id="mainline-top"]').contents().find("head")[0].appendChild(mycss);
    );
</script>

【讨论】：

完美，如何使用 iframe 的数据属性？我不能给 iframe 一个 ID，否则我会 使用可以使用：$('*[data-search-id="mainline-top"]') 当我在 jsfiddle 中尝试时，它似乎不起作用 如果 iframe 的来源有不同的来源或协议（http://、https://），那么您根本无法使用任何东西访问它。 如果我能让您的示例先运行，那么我可以对其进行测试。有没有办法运行你的代码 sn-p 来尝试一下？当我将其复制/粘贴到 JS fiddle 时，contents().find("head") 部分不起作用。但是做 $('*[data-search-id="mainline-top"]').hide();确实有效

使用 jQuery/javascript/css 更改 Flash 视频对象的属性

】使用jQuery/javascript/css更改Flash视频对象的属性【英文标题】：changepropertiesofflashvideoobjectusingjQuery/javascript/css【发布时间】：2015-08-1207:21:02【问题描述】：我有一个播放Flash对象（视频）的iframe在它拥有的iframe内<objectid="objectId"... 查看详情

如何从一系列数据属性的元素中更改 css？

】如何从一系列数据属性的元素中更改css？【英文标题】：HowcanIchangethecssfromelementsofarangeofdataattributes?【发布时间】：2018-03-2810:16:19【问题描述】：我想对我的表格行从数据日期“2018-04-03”到数据日期“2018-04-06”进行着色。有... 查看详情

修改iframes内元素的样式(代码片段)

前言：网页可以使用iframe元素嵌入其他页面，因此一个页面之中会存在多个窗口；在子页面中，又可以嵌入别的页面，从而形成多级窗口。iframe元素遵守同源策略，只有当父页面与框架页面来自同一个域名... 查看详情

使用 jQuery 更改 CSS 类属性

】使用jQuery更改CSS类属性【英文标题】：ChangeCSSclasspropertieswithjQuery【发布时间】：2012-07-1312:53:21【问题描述】：有没有办法使用jQuery更改CSS类的属性，而不是元素属性？这是一个实际的例子：我有一个类为red的div.redbackground:red;... 查看详情

使用 jQuery 获取 iframe 内元素的高度

】使用jQuery获取iframe内元素的高度【英文标题】：GetheightofelementinsideiframewithjQuery【发布时间】：2013-12-2812:54:06【问题描述】：我有一个包含“iframe”元素的文件<iframesrc="test.php"id="frameDemo"></iframe>和一个包含未知高度的di... 查看详情

iframe嵌套(代码片段)

iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。<iframesrc="demo_iframe_sandbox.htm"></iframe>但是，有追求的我们，并不是想要这么low的iframe.我们来看看在iframe中还可以设置些什么属性iframe常用属... 查看详情

拖动文件时更改元素的 CSS 属性

...简单的div，当文件被拖放到文件上时，它会处理文件。我使用https://www.raymondcamden.com/2019/08/08/drag-an 查看详情

JS：更改 iframe 链接标签内

...述】：我正在尝试从iframe外部更改iframe内所有a标记的href属性。这是我目前所拥有的：<Html><Head><Title>changelinks</Title></Head><body>&l 查看详情

隐藏 CSS 元素而不更改显示属性 [重复]

...始显示的元素，但它是隐藏的（起初）。我知道还有其他使用CSS隐藏元素的方法，但是我也不希望元素一开始就占用空间。举个例子.target_elementdisplay:table;//eventhap 查看详情

git--------------iframe-------------劉(代码片段)

iframe基本操作　　通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。<iframesrc="./register.html"frameborder="0"></iframe>我们来看看在iframe中还可以设置些什么属性iframe常用属性:1.frameborder:是否显示边框，1(yes),0(no)2... 查看详情

web前端之iframe详解(代码片段)

 iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。<iframesrc="demo_iframe_sandbox.htm"></iframe>但是，有追求的我们，并不是想要这么low的iframe.我们来看看在iframe中还可以设置些什么属性iframe常... 查看详情

使用 jQuery 更改和加载 iframe ‘src’ 属性

】使用jQuery更改和加载iframe‘src’属性【英文标题】：Changingandloadinganiframe‘src’attributewithjQuery【发布时间】：2018-09-3007:17:12【问题描述】：我对jQuery非常陌生，而且我的网页设计总体上很生疏。我的网站上有一个带有12个按钮... 查看详情

如何更改指令内元素的 css 类？

】如何更改指令内元素的css类？【英文标题】：Howtochangethecssclassofaelementinsideadirective?【发布时间】：2015-01-1806:24:43【问题描述】：我想根据用户单击的按钮更改图标的颜色（假设有一个弹出框，其中包含三个按钮，即高、中、... 查看详情

iframe 内 Web 元素的 QuerySelector

...我正在尝试在iframe中进行查询。我正在构建要在Selenium中使用的字符串选择器，通常我 查看详情

iframe 内元素的 Tabindex

...里面是一个带有文件类型输入元素和图像元素的表单。当使用tab键时，它聚焦于整个iframe而不是聚焦于输入框，下一次按下tab聚焦于为文件类型的输入元素出现的浏览按钮。我的要求是当我按tab时，焦点在输入文本框，然后是浏... 查看详情

使用jquery获取iframe内的元素属性

当需要获取iframe里的内容时需要有几个前提，否则你是获取不到的；1：当前页面与iframe的src的页面需要在同一个域名下；2：必须要等iframe里边的页面加载完成才能获取，否则你要获取的标签就是不存在；当这两个条件都满足的... 查看详情

iframe标签的使用(代码片段)

iframe标签的使用1、什么是iframe2、iframe的元素属性3、iframe操作4、iframe对象及属性5、创建iframe元素6、iframe之间的通信6.1、什么是主域名，什么是子域名(拓展)6.2、iframe之间的通信7、其他7.1、iframe自适应7.2、防嵌套网页7.2.1、... 查看详情

javascript_获取iframe框架中元素节点的属性值

...ndow对象]　　　　它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。　　[document对象]　　该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。2.JS原生方法获得iframe的window对象　　document.getElementBy... 查看详情