天道酬勤,学无止境

How do I get all iframe elements?

问题

当一些外部 iframe 使用以下代码加载时,我正在显示一个加载指示器:

<html>

    <head>
        <title>Loading iframe</title>
    </head>

    <script>


    function loading_iframe(){
        document.getElementById('loading_iframe').style.display = "none";
        document.getElementById('loading').style.display = "";
        document.getElementById('loading_iframe').onload = function(){
            document.getElementById('loading').style.display = "none";
            document.getElementById('loading_iframe').style.display = "";
        }
    }
    </script>

    <body>
        <iframe id="loading_iframe" src="iframe.html" width="800" height="100"></iframe>
        <div id="loading">Loading...</div>


        <script>
            loading_iframe();
        </script>
    </body>
</html>

问题是我每页运行大约 50 个迷你 iframe,我不想重写上面的代码来匹配每个 iframe id。

有没有办法可以将每个 iframe id 与正则表达式匹配,例如:

  • loading_iframe1
  • loading_iframe2
  • loading_iframe3
回答1

首先, <script>标签应该放在<head><body>中,但不能放在两者之间!


我会将您的命名方案稍微更改为:

<iframe id="iframe1" src="iframe.html" width="800" height="100"></iframe>
<div id="iframe1-L">Loading...</div>

<iframe id="iframe2" src="blah.html" width="800" height="100"></iframe>
<div id="iframe2-L">Loading...</div>

现在只需要遍历所有的iframe,通过将ID改成+"-L"就可以轻松访问对应的div

要获取所有iframe元素,请使用getElementsByTagName() ,然后使用 for 循环遍历这些元素:

像这样的东西:

var i, frames;
frames = document.getElementsByTagName("iframe");
for (i = 0; i < frames.length; ++i)
{
      // The iFrame
    frames[i].style.display = "none";
      // The corresponding DIV
    getElementById(frames[i].id + "-L").style.display = "";
    frames[i].onload = function()
    {
        getElementById(frames[i].id + "-L").style.display = "none";
        frames[i].style.display = "";
    }
}
回答2

使用普通的 JavaScript:假设loading_iframe函数对每个 iframe 执行完全相同的操作,您可以做的是拥有一个包含所有 iframe 的 ID 的数组,然后遍历该数组。

function load_iframes() {
    iframes = ["loading_iframe1", "loading_iframe2", "loading_iframe3"];
    for (i = 0; i < iframes.length; i++) {
        loading_iframe(iframes[i]);
    }
}

function loading_iframe(iframe_id){
    document.getElementById(iframe_id).style.display = "none";
    document.getElementById('loading').style.display = "";
    document.getElementById(iframe_id).onload = function(){
        document.getElementById('loading').style.display = "none";
        document.getElementById(iframe_id).style.display = "";
    }
}

或者,如果您的 iframe ID 中有一个从 1 开始到 50 结束的序列号,并且您不需要在数组中列出所有 iframe ID,则此版本的load_iframes将起作用:

function load_iframes() {
    num_iframes = 50;
    for (i = 1; i <= num_iframes; i++) {
        loading_iframe("loading_iframe" + i);
    }
}

使用 jQuery:为所有 iframe 提供一个 CSS 类,例如loading_iframe 。 然后,您可以使用 jQuery 选择所有具有loading_iframe类的元素。

回答3

只是添加到 Jeff 的回答中:我真的建议您查看 jQuery。 它非常强大,这样的任务应该相当简单。 鉴于您给每个 iFrame 一个类“loading_iframe”,您可以执行以下操作:

$(".loading_iframe").each(function(index) {
   console.log(this); ;
});

console.log() 调用假定您在 Firefox 或 Google Chrome 中使用 FireBug。 不确定这是否适用于其他浏览器。

另请参阅 .each() 的文档。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • How do I get all iframe elements?
    I'm showing a loading indicator while some external iframes are loaded with the following code: <html> <head> <title>Loading iframe</title> </head> <script> function loading_iframe(){ document.getElementById('loading_iframe').style.display = "none"; document.getElementById('loading').style.display = ""; document.getElementById('loading_iframe').onload = function(){ document.getElementById('loading').style.display = "none"; document.getElementById('loading_iframe').style.display = ""; } } </script> <body> <iframe id="loading_iframe" src="iframe.html" width="800" height="100"></iframe> <div id=
  • 无法选择 iframe 内的元素(Cannot select an element inside an iframe)
    问题 我正在尝试编写一个需要访问 iframe 中的元素的测试。 (想象一个有 20 把椅子的房间的图画,这些椅子中的每一把都是它自己的对象,我需要能够访问这些椅子)。 使用开发人员工具和元素查找器,它只会突出显示 iframe,但不允许我访问。 我对测试非常陌生,所以我不知所措。 高亮iframe时html中的元素是这样的: <iframe name="daasFrame" class="daas-surface" frameborder="0" width="100%" height="100%" ng-src="/Drawing/EventDiagram/e020c975-6f1f-4c6c-bf34-34fa7221c8f3/?venueId=&seatingStyle=theater&language=en&units=Imperial&theme=default&shiftHeader=true" src="/Drawing/EventDiagram/e020c975-6f1f-4c6c-bf34-34fa7221c8f3/?venueId=&seatingStyle=theater&language=en&units=Imperial&theme=default&shiftHeader=true"></iframe> 我想在单独的测试中我可以切换到
  • PHP DOMDocument 跳过偶数元素(PHP DOMDocument skips even elements)
    问题 您好,我正在使用此方法将所有 iframe 和 img 标签替换为 span 标签 $string = clean($string); $dom = new \DOMDocument; $dom->loadHTML(mb_convert_encoding($string, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); $iframes = $dom->getElementsByTagName('iframe'); foreach($iframes as $iframe) { $src = $iframe->getAttribute('src'); $span = $dom->createElement('span'); $span->setAttribute('title', $src); $span->setAttribute('class', 'lazy-youtube'); $iframe->parentNode->replaceChild($span, $iframe); } $images = $dom->getElementsByTagName('img'); foreach($images as $image) { $src = $image-
  • 在Selenium Web驱动程序中如何选择正确的iframe(in selenium web driver how to choose the correct iframe)
    问题 我试图单击此页面上的一个元素: url = 'https://finance.yahoo.com/quote/GOOG?ltr=1' driver = webdriver.Firefox() driver.get(url) driver.find_element_by_link_text('Financials') 在这一点上,我想单击“现金流量”,“资产负债表”或“季度”。 我知道这些按钮已加载,因为我可以使用BeautifulSoup从页面源中提取它们。 但是,当我尝试使用Selenium进行操作时: driver.find_element_by_link_text('Cash Flow') driver.find_element_by_link_text('Balance Sheet') driver.find_element_by_link_text('Quarterly') 全部返回“无法定位元素”,除了“季度”返回一个元素,但它位于图上方的一个元素而不是我感兴趣的表格上方的一个元素。 我认为这是由于位于错误的iframe中,而我找到了所有iframe: driver.find_elements_by_tag_name('iframe') 返回9个元素。 但是我在确定要单击的元素属于哪个iframe时遇到了麻烦。 我也按顺序浏览了iframe
  • 如何让 IFRAME 监听父 iframe 的点击事件并使用父 iframe 中被点击元素的路径(How to make IFRAME listen to click event of parent iframe and use the path of the clicked element in parent iframe)
    问题 我的 html 页面中有两个 iframe 在同一个域中 <iframe id="i1" width="100%" height="100%" src="/wordpress"></iframe></th> <iframe id="i2" width="100%" height="100%" src="/wordpress"></iframe></th> 我已经为 iframe 中的 a 标签提供了点击事件,我从这里获取父 iframe 中被点击元素的路径 $('a').click(function(e){ var path = $(this).getPath(); var ahash={ 'path':path }; if (getFrameElement()) window.parent.document.Aaddevent(e, ahash); }); 我现在想使用此路径并在其他 iframe 中触发 click 事件,以便两个 iframe 具有相同的页面视图。 我通过以下方式使用父 iframe 的单击事件中的第二个 iframe 中的路径: var iframes= parent.document.getElementsByTagName('iframe'); for (var i= iframes.length; i--;) { var iframe=
  • 这个响应式 iframe 容器代码段是如何工作的? [复制](How does this responsive-iframe-container snippet work? [duplicate])
    问题 这个问题在这里已经有了答案: 使 iframe 响应(24 个回答) 6 个月前关闭。 我不记得我是如何发现这个代码,并完全没有问题,应用它: /* Responsive iFrame */ .responsive-iframe-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .responsive-iframe-container iframe, .vresponsive-iframe-container object, .vresponsive-iframe-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 它做了一些神奇的伏都教,使嵌入的 iframe 谷歌日历变得响应,从而根据您的视图大小调整 iframe 侧。 这很棒! 问题是:它是如何工作的? 没有看到position或overflow来解决问题。 也不是所有其他属性。 我猜这个技巧是关于vresponsive的,但我没有添加任何 jscript 来处理它,我什至没有使用那个类。 我使用的只是responsive-iframe
  • 单击链接javascript停止所有播放的iframe视频(Stop all playing iframe videos on click a link javascript)
    问题 我的网页上有一个iframe视频列表。 <iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe> <iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe> <iframe width="520" height="360" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe> <a href="#" class="close">Stop all videos</a> 点击链接Stop all videos我需要停止所有正在播放的iframe Stop all videos 。 我怎样才能做到这一点? 回答1 试试这个 <script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
  • 如何知道DIV中的所有元素是否都已完全加载?(How to know if all elements in a DIV have been fully loaded?)
    问题 有一个div ,其中将通过Ajax加载一些元素(图像,iframe等)。 这些元素完全加载后,我需要为div执行一个函数。 如何确定div所有元素是否都已完全加载? 我使用jQuery作为库。 回答1 对于图片和iframe,您可以使用load事件: // get all images and iframes var $elems = $('#div').find('img, iframe'); // count them var elemsCount = $elems.length; // the loaded elements flag var loadedCount = 0; // attach the load event to elements $elems.on('load', function () { // increase the loaded count loadedCount++; // if loaded count flag is equal to elements count if (loadedCount == elemsCount) { // do what you want alert('elements loaded successfully'); } }); 通过Ajax将元素附加到#div元素后,应执行上述脚本。 回答2
  • 如何使用 jquery 处理 $.get 并捕获 html 元素?(How to process $.get and catch html element using jquery?)
    问题 我正在使用 jQuery 阅读 html 文档。 以下是我的代码。 我需要找到lang属性,它是 HTML 元素的一个属性。 但是我很难按照我的方式选择它。 当我处理 HTML 标记时,它要么没有值,要么为null或undefined 。 你能帮我解决这个问题吗? $.get(page, function(response) { alert(response); alert($(response).filter('html').attr('lang')); });​ 回答1 当您对响应文本执行$(response)时,大多数(如果不是全部)浏览器都会删除html元素。 要查看它,我看到两个选项: 将文本作为文本处理。 不理想,但解析<html>标签上的属性并没有那么复杂。 例如,这应该提取lang属性,除非出现异常: var regex = /<\s*html\s[^>]*lang\s*=\s*["']?([A-Za-z0-9\-]+)/i; var matches = regex.exec(str); console.log(matches[1]); 活生生的例子 | 直播源通常的警告:HTML 不是常规语言,因此您无法使用常规表达式可靠地解析它。 有时,经过良好调整的正则表达式可以从 HTML 文本中提取一些信息,当它们使用预期的输入数据进行严格测试时,这些信息可能
  • 如何在iFrame中访问DOM元素(How can I access the DOM elements within an iFrame)
    问题 我正在编写一个jQuery插件,该插件需要能够针对iFrame中的DOM元素运行。 我现在只是在本地进行测试(即url为file://.../example.html),在Chrome中,我一直打“ SecurityError:无法从'HTMLIFrameElement'中读取'contentDocument'属性:阻止了一个框架通过访问跨域框架而原点为“ null”。” 在Safari中,我只得到一个空文档。 鉴于父文件和iFrame的文件都从本地磁盘(正在开发)中,并且将从同一台服务器(正在生产中)中退出,我以为我不会遇到跨域问题。 有什么方法可以使浏览器确信我的本地文件实际上是同一域的? <aside>有趣的是,在Safari中,直接使用控制台,我可以键入$("iframe").get(0).contentDocument.find("ol") ,它很高兴地找到了我的列表。 在Chrome中,同一行会引发安全错误,就像正在执行一样。 </ aside> 更新 根据下面的建议,我已经启动了一个简单的本地Web服务器来对此进行测试,现在没有收到跨域错误-是的-但我也没有得到任何内容。 我的Javascript看起来像 $(document).ready(function(){ var myFrame = $("iframe"), myDocument = $(myFrame
  • in selenium web driver how to choose the correct iframe
    I'm trying to click on an element on this page: url = 'https://finance.yahoo.com/quote/GOOG?ltr=1' driver = webdriver.Firefox() driver.get(url) driver.find_element_by_link_text('Financials') At this point I would like to click on 'Cash Flow', 'Balance Sheet', or 'Quarterly'. I know these buttons have been loaded because I can extract them using BeautifulSoup from the page source. But when I try to do it using Selenium: driver.find_element_by_link_text('Cash Flow') driver.find_element_by_link_text('Balance Sheet') driver.find_element_by_link_text('Quarterly') All return 'Unable to locate
  • 如何在 CSS 中的#document 中选择元素?(How do I select elements within a #document in CSS?)
    问题 我正在尝试在 CSS 中设置外部<body>标签的背景图像: <html> <body> ... #document <html> <body> </body> </html> ... </body> </html> 但是,我似乎无法在不影响另一个的情况下选择<body>标签之一。 它们没有 ID,当我尝试通过子选择器进行选择时,# #document使事情变得复杂(我什至不知道它是什么)。 如果我尝试像body html body {...}这样的东西,# #document就像一个我无法#document的障碍,所以它不会选择内部的 body 标签。 关于如何选择其中一个身体标签的任何想法? 回答1 给定的列表似乎是一个 DOM 检查器视图。 在这种情况下,# #document不是指一个 id 为“document”的任意元素——它指的是<iframe>托管的文档(参见 Node.nodeName)。 您可以在 Firefox 和 Chrome 的 DOM 检查器中看到这一点; 事实上,您现在甚至可以通过将任一浏览器指向data:text/html,<iframe> ,打开检查器并展开<iframe>节点来尝试它。 IE 也显示嵌套树,但没有#document标记。 如果您看到背景图像从宿主文档渗入 iframe,则意味着 iframe 中的文档没有自己的背景。
  • 获取计算的样式并忽略默认值(Get the computed style and omit defaults)
    问题 我正在尝试获取元素的当前运行时样式,并过滤掉具有默认值的属性。 例如,使用这样的标记: <style> .foo { background: red } span { font-size:30px } </style> <div style="color: blue"> <span id="bar" class="foo">hello</span> </div> 我希望结果是: background-color: red; color: blue; font-size: 30px; 我尝试了window.getComputedStyle ,但是它返回了很多东西,我不确定如何过滤掉默认值。 任何指针将不胜感激。 回答1 到了那里,我通过添加一个新的虚拟DOM元素来做到这一点,以了解任何元素的默认样式。 /** * IE does not have `getComputedStyle` */ window.getComputedStyle = window.getComputedStyle || function( element ) { return element.currentStyle; } /** * get computed style for an element, excluding any default styles * * @param {DOM}
  • chrome 扩展、jstree、iframe:拖放(chrome extension, jstree, iframe: drag and drop)
    问题 我是 chrome 扩展开发的新手,我正在构建一个需要侧面板(不是弹出窗口)的扩展,就像萤火虫一样,但在右侧。 我在侧面板中使用 jsTree(带有 json_data),我想将元素从网页拖到侧面板。 到目前为止,为了创建侧面板,我使用了一个带有 z-index 的 div 附加到主体,以便它出现在网页上方,但是由于网站的 css,我的侧面板中的元素样式发生了变化。 所以我想我可以使用 iframe 来避免侧面板中的任何 css 不兼容。 我使用 src="chrome-extension:///page.html" 动态创建 iframe。 通过直接在 iframe 的源页面中加载 jquery+jstree 脚本,我设法使我的 jstree 在 iframe 中正常工作......这很糟糕,但我无法获得用于 iframe 源页面的内容脚本(尽管“all_frames”:真)。 我想将元素从网站页面拖到 iframe 中的 jstree 中...我找到了 iframeFix: true 和 refreshPositions: true,但这似乎没有改变任何东西...任何人都知道如何做到这一点? 如果我不使用 iframe,根据网络上的多个示例,我可以使用 dnd 插件轻松地将元素拖放到 jstree。 我没试过; 即使它有效,我侧面板中的 css 也会改变
  • 如何真正隔离 Google Chrome 扩展程序中的样式表?(How to really isolate stylesheets in the Google Chrome extension?)
    问题 我写了一个谷歌浏览器扩展,它弹出一个带有自动完成字段的对话框,它有自己的样式,但有些网站我的 CSS 完全损坏,看起来不太好。 我知道使用 iFrame 隔离样式,但是在 Google Chrome 扩展中,无法以这种方式隔离我的 HTML 和 CSS。 另一种方法是将我的所有内容包装到一个单独的 div 中,并使用它自己的 id 和该 id 的相关样式,我这样做了,但它似乎不适用于某些具有“硬”标签样式重载或“!重要”指令在 CSS 代码中。 所以,我想知道有没有什么方法可以真正以 z 方便的方式隔离我的样式,或者重载每个小的 CSS 属性来修复每个站点的一个或另一个样式问题是我的坏习惯? 顺便说一句:我设置了我的清单以加载“document_end”中的所有内容,但我发现它没有应用于每次 DOM 准备就绪时加载的样式表。 回答1 在提出问题时,您唯一的选择是使用 iframe 或具有非常高特异性的样式表,并明确设置可能影响样式的所有属性。 最后一种方法非常繁琐,因为总会有一些属性被你忽略。 因此,隔离样式表的唯一可用方法是使用 iframe。 这个问题的解决方案 - 没有 iframe 的样式隔离 - 是 Shadow DOM(自 Chrome 25 起)。 您可以在 HTML5 Rocks 中找到教程。 有关使用 Shadow DOM 隔离样式的真实 Chrome
  • Selenium WebDriver [Java] 如何在 PageFactory 中存储 iframe 的元素(Selenium WebDriver [Java] How do I store the elements of an iframe in a PageFactory)
    问题 我正在遵循页面对象模型来自动化一个应用程序中的流程。 在其中一个模块中,我必须添加一个具有“标题”和“正文”字段的新帖子。 到目前为止,我可以在“标题”字段中发送文本,就像在顶部窗口中一样。 但是“正文”在 iframe 内。 在“标题”中传递文本后,我尝试在写入“正文”之前切换到 iframe。 这段代码我写在主文件中。 但是 Selenium 显示错误为org.openqa.selenium.ElementNotVisibleException: element not visible 我的 PageFactory 代码如下: package com.wordpress.pom.Pages; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.support.FindBy; import org.openqa.selenium.support.How; public class AddNewPost { WebDriver driver; public AddNewPost(WebDriver addNewPostDriver) { this.driver=addNewPostDriver; } @FindBy(how
  • 如何使用 Selenium 解析网站中的表格数据?(How can I parse table data from website using Selenium?)
    问题
  • 如何覆盖 iframe 并允许点击(How to overlay an iframe and allow click through)
    问题 我希望能够在任何网页中放置一个“立即聊天”按钮,该按钮会弹出一个聊天窗口。 我可以使用 JavaScript 添加“立即聊天”按钮,但这会继承页面中的 css 并使其看起来很糟糕。 所以我想把它放在它自己的页面中,并使用 iframe 将它嵌入到任何网页中。 这是我能得到的最接近的。 它在页面顶部显示 iframe,但不允许点击。 如何使“单击我”按钮可点击? 我看到大多数实时聊天都这样做,所以它一定是可能的。 <html> <head></head> <body> <div><button>Click Me</button></div> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://www.botlibre.com/script?file&id=15069189" style="height:100%; background: none; border: 0px; bottom: 0px; float: none; left: 0px; margin: 0px; padding: 0px; position: absolute; right: 0px; width: 100%;"></iframe> </body> </html> 希望不必精确调整 iframe
  • 使用jQuery更改iframe属性(Change iframe attribute with jquery)
    问题 我有这样的事情: <iframe id="frame" width="200" height="150" src="http://www.youtube.com/embed/GiZGEFBGgKU?rel=0& amp&iv_load_policy=3;autoplay=1" frameborder="0" allowfullscreen></iframe> 我想使用尝试更改的jQuery的宽度和高度: $("#frame").setAttribute("width", "50"); $("iframe").setAttribute("width", "31"); 他们都不工作 回答1 正如Sarfraz所指出的那样,为jquery选择器对象设置属性的正确方法是使用attr("attrName", "attrVal") 。 setAttribute不起作用的原因值得解释,因为我多次反对这一观点: 当您使用jquery的选择器语法时,它将返回一个对象-在jquery中定义-本质上是选择器匹配的所有元素的列表。 无论它匹配一个元素(使用id选择器总是应该匹配)还是不止一个,返回的对象都是元素列表,而不是单个DOM对象(例如单个元素)。 setAttribute是用于实际HTMLElement对象的方法。 这就是为什么 $("#frame")[0].setAttribute(
  • jquery - 在某些页面上的 IE 中拒绝 iframe 访问(jquery - iframe access denied in IE on some pages)
    问题 我是printThis的作者,一个用于打印的jquery插件。 https://github.com/jasonday/printThis 我有一个用户提出了一个问题,我无法破解,不幸的是,我无法共享页面(隐私问题)。 在用户的站点上,该问题出现在 IE 中的某些页面上,而其他页面上则没有。 打印失败,因为 iframe 仍然是空的。 IE 中的错误在 jQuery 中: contents: function (a) { return f.nodeName(a, "iframe") ? a.contentDocument || a.contentWindow.document : f.makeArray(a.childNodes) } 使用日志记录,我能够确定它在这条线上失败了: var $doc = $("#" + strFrameName).contents(); 但同样,这只发生在某些页面上,我无法在该用户站点之外的任何实例中重新创建。 我的问题:这里有更好的方法吗? 或使$doc对象更防弹的方法? // ----------------------------------------------------------------------- // printThis v1.1 // Printing plug-in for jQuery // //