JavaScript或jquery获取frame的元素的值?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript或jquery获取frame的元素的值?相关的知识,希望对你有一定的参考价值。

home页面的frame架构:

<frameset cols="230,*" name="allframe" frameborder="0" border="0" framespacing="0">
<frame id="LeftFrm" name="LeftFrm" src="left.html" frameborder="0" border="0" framespacing="0">
<frameset rows="110,*">
<frame id="HeadFrm" name="HeadFrm" src="head.html" frameborder="0" border="0" framespacing="0" scrolling="NO">
<frame id="content" name="contentframe" src="index.html" frameborder="0" border="0" framespacing="0">
</frameset>
</frameset>
现在需要在id=HeadFrm(head.html)中的页面中通过编写JS或者jquery去获取LeftFrm页面(left.html)中元素的值。例如:left.html中有个<p id="test">AAA</p>,去获取id=test元素的值或者修改其属性!
希望大家能解释详细点!在这个位置卡好久了!
需要兼容谷歌,IE,firefox浏览器

最好是能够用jquery解决!

query取得iframe中元素的几种方法

在iframe子页面获取父页面元素
代码如下:

$('#objId', parent.document);
// 搞定...

在父页面 获取iframe子页面的元素
代码如下:

$("#objid",document.frames('iframename').document)

$(document.getElementById('iframeId').contentWindow.document.body).html()

显示iframe中body元素的内容。

$("#testId", document.frames("iframename").document).html();

根据iframename取得其中ID为"testId"元素

$(window.frames["iframeName"].document).find("#testId").html()

用JS或jQuery访问页面内的iframe,兼容IE/FF
注意:框架内的页面是不能跨域的!

假设有两个页面,在相同域下.

index.html 文件内含有一个iframe:

XML/HTML代码

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

iframe.html 内容:

XML/HTML代码

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

www.koyoz.com

1. 在index.html执行JS直接访问:

javascript代码
document.getElementById('koyoz').contentWindow.document.getElementById

('test').style.color='red'
通过在index.html访问ID名为'koyoz'的iframe页面,并取得此iframe页面内的ID为'test'的

对象,并将其颜色设置为红色.

此代码已经测试通过,能支持IE/firefox .

2. 在index.html里面借助jQuery访问:

JavaScript代码
$("#koyoz").contents().find("#test").css('color','red');
此代码的效果和JS直接访问是一样的,由于借助于jQuery框架,代码就更短了.

收集网上的一些示例:
用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了

1. 在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");

2. 在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input:radio").attr("checked","true");

父窗口想获得IFrame中的Iframe,就再加一个frames子级就行了,如:
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");

3.在子窗口中调用父窗口中的另一个子窗口的方法(FRAME):
parent.frames["Main"].Fun();
参考技术A

仔细检查你的js代码,看看是否有问题。

我用的frameset都没有问题

parent.LeftFrm.document.getElementById("test").innerHTML

parent.LeftFrm.$("#test").html()

见图。。

追问

上面两种方法,一种js的,一种jquery的,在ie下面都可以,但是在谷歌下面测试就不起作用了!

追答

我截的图就是Chrome的开发者工具。所以能证明一点谷歌下没有问题。
各大主流浏览器对js的解释多少有点出入。jquery的兼容性还是不错的。
你没有贴全代码,也不知道你的问题出在哪里。
换个写法试试--

top[0].$("#test").html()
top.LeftFrm.$("#test").html()
parent.LeftFrm.$("body").contents().find("#test")

本回答被提问者和网友采纳
参考技术B 这个问题貌似昨天回答过相似的。
不是谷歌浏览器不生效,而是frameset这种标签很少用了。把frameset去掉。直接用样式控制每个iframe的位置。parent.$("#test").html("BB")
如果你用iframeset的话,是实现不了的。
参考技术C parent.LeftFrm.document.getElementById("test"),追问

但是这种方法在谷歌浏览器里面不生效,在IE和firefox下面就可以!怎么解决这个问题?

如何使用 jQuery(或 Javascript)获取可见文本?

【中文标题】如何使用 jQuery(或 Javascript)获取可见文本?【英文标题】:How do I get just the visible text with jQuery (or Javascript)? 【发布时间】:2010-12-23 04:51:51 【问题描述】:

我有网站可以转换Japanese Kanji into Romaji (roman letters):

输出显示和隐藏用户需要根据输入标准查看的内容。例如:

&lt;div id="output"&gt;&lt;span class="roman"&gt;watashi&lt;/span&gt; &lt;span class="english"&gt;I&lt;/span&gt;&lt;/div&gt;

该界面允许用户根据他们想要看到的内容在watashiI 之间切换和输出。 CSS 使用 jQuery 和切换按钮隐藏其中之一。 (隐藏机制包括简单地向 body 添加一个类并让 CSS 完成它的工作)。

问题在于,当用户将文本复制/粘贴到 Word 中时,它会复制所有内容。所以我决定使用一个系统来复制粘贴文本,使用 JavaScript 和 jQuery,但问题再次出现:

$('#output').text() 输出watashi I,即使I 在页面本身而不是watashi 上是不可见的。有什么方法可以只获取可见文本?

【问题讨论】:

【参考方案1】:

使用:visible selector of jQuery

在你的情况下,我认为你想做:

$('#output').children(":visible").text() 

【讨论】:

顺便说一句,根据 OP 问题,只有一个 #output 的孩子是隐藏的,这样可行吗?当我测试$('#output:visible').text() 时,它仍然显示“Watashi I”,但 OP 只想要“Watashi”,不是吗? @s.mark:你一定是对的。我编辑了我的答案,我认为它应该可以工作。如果不尝试 *:visible 或类似的东西。你也可以测试 .css("display")!="none" 我认为这是错误的方法,因为它包括重新实现已经存在的浏览器功能(复制/粘贴)。 @smark:好!这显然不是最好的解决方案。最好的办法是只加载到所需语言的页面,但这会立即解决 OP 的问题 嘿,Marcgg,这似乎工作得几乎完美。它确实复制了可见文本,但如果我通过“旋转”按钮更改可见文本,那么复制操作仍然只能获取原始可见文本 - 而不是更新后的文本(如果您访问实际站点和单击旋转图标以可视化文本的变化方式)。所以我想如果可见文本发生变化,它会变得有点复杂。 (顺便说一句,我想“提高”你的建议,但我是新来的,它不允许我!)【参考方案2】:

不要隐藏 span,而是删除 span 元素并保留对它的引用。当用户单击切换按钮时,删除另一个并插入您保留引用的那个。用户将无法再选择不在 DOM 中的内容。

【讨论】:

嘿'风之声' :-) 我更愿意找到一个目前不涉及删除元素的解决方案,因为这需要对 coed 进行重大重写。 我想你将不得不使用一些捉迷藏魔法然后:) 我会在绑定到切换按钮的界面元素的函数中使用 JS 动态删除它们,但如果那也是很多工作我没有其他建议:(【参考方案3】:

其他解决方案没有给我我需要的东西。

简答

我的答案是:

$('#output *:not(:has(*)):visible').text()

plunkr

TL;DR

marcgg解决方案的问题

你不应该询问某个根元素下所有元素的文本..

为什么? - 它将重复输出并忽略隐藏标志

让我们看一个简单的例子

<div id="output" class="my-root">
    <div class="some-div">
         <span class="first" style="display:none"> hidden text </span>
         <span class="second" > visible text </span>
    </div>
<div>

现在如果我这样做$('#output').children(":visible").text()

我会得到.some-div.second.. 事实上.some-div 对我来说并不重要..

当我在这些元素上请求 text() 时,.some-div 也会返回隐藏文本..

所以从技术上讲,marcgg 的解决方案是错误的恕我直言......

我回答的原因

现在,为了正确回答这个问题,我们必须做出一个假设。对我来说,这似乎足够合理。

假设是文本只出现在叶元素中..

所以我们不会看到这样的:

<div id="output" class="my-root">
    <div class="some-div">
         <span class="first" style="display:none"> hidden text </span>
         <span class="second" > visible text </span>
    </div>

    some text here.. 

<div>

为什么这个假设对我来说似乎是合理的?两个原因:

因为很难维护以这种方式构建的页面 - 并且随着时间的推移,有经验的人会学习并避免它。 很容易将您的 html 转换为这样的结构。只需用跨度包装父母的文字。所以即使这个假设现在不存在,也很容易实现。

有了这个假设,你要做的是请求所有的叶子元素(没有子元素的元素),过滤掉可见的元素,然后请求它们的文本..

$('#output *:not(:has(*)):visible').text()

这应该会产生正确的结果。

必须在叶子元素之外有文字吗?

cmets 建议有时您只需要在叶子元素之外添加文本

<div> This is some <strong style="display:none"> text </strong>  </div>

如您所见,您有&lt;strong&gt; 作为叶子,并且在此示例中通常在其外部放置文本。

您可以使用我上面建议的解决方法来解决它。但是如果您不能呢?

您可以克隆 dom,然后删除所有隐藏的元素。 这里的问题是,为了让:visible 选择器或:hidden 选择器工作,我必须在文档上有 dom 元素(这意味着用户实际上可以看到)。 所以,这种方法有一些副作用,所以要小心。

这是一个例子

对于这个 html

 <div id="output" class="my-root">
     <span>
         some text <strong style="display:none">here.. </strong>
     </span>
</div>

这个javascript有效

$(function()
     var outputClone = $('#output').clone();
    $('#output :hidden').remove(); 
    console.log($('#output').text()); // only visible text
    $('#output').replaceWith(outputClone);
    console.log($('#output').text()); // show original state achieved. 
)

见plunker here

如前所述 - 副作用可能看起来像瞬间闪烁,或一些应该运行的初始化脚本。有些可能会通过一些原始想法来避免(大小为 1px/1px 的 div 包含原始内容旁边的克隆?)取决于你的场景。

【讨论】:

文本在叶节点中的假设似乎有问题 - 例如如果您有 文本或 文本,那么这些部分将位于叶节点中,而不是周围非粗体或非强调文本的其余部分。 但我展示了如何轻松绕过它。还有另一种方法.. 您可以克隆整个 HTML,然后简单地删除隐藏的部分,然后对所有内容执行“getText”。 @DaveHilditch 添加了一个也可以解决您的情况的示例。 我在您发布的最终 JS 函数中出现了一些奇怪的行为,您确定正确保存所有 DOM 元素上的所有 JS 事件吗? @Dave13s 不确定我是否遵循了这个问题。我发布了一个plunker。如果您遇到问题 - 您能在 plunker 上重现它吗?它会更容易解决。【参考方案4】:

小伙答对了。

但是,我正在处理一个“this”对象,因此要让他的答案起作用,您需要使用以下语法...

$('*:not(:has(*)):visible', this).text()

【讨论】:

【参考方案5】:
var lookup = function(element, text) 
    //DFS Recursive way of finding text on each level
    //Visible only works on elements that take up space(i.e. not fixed position elements)
    var results = element.children(':visible');

    //Look at the text at each level with the children removed
    var newText = '';
    results.each(function(index, value) 
        newText += $(value).clone()
            .children()
            .remove()
            .end()
            .text();
    );

    var moreResultText = '';
    results.each(function(index, value) 
        moreResultText += lookup($(value), text);
    )

    if (results.length > 0) 
        return text + newText + moreResultText;
     else 
        return text;
    
;

lookup($('#output'), ''));

大多数其他功能在页面的大部分区域运行时都会崩溃,这应该是一种更准确的方法来确定实际向用户显示的内容,不会损坏页面,也不会返回不可见的文本用户。

当然要小心,这不会保留任何格式感,并且元素之间的输出间距可能不正确。此外,它可能没有正确排序返回的文本,在这些方面它的使用将受到限制。另一个考虑因素是可见的真正定义对nail down 来说有点困难,但对于这个例子,我接受 ":visible" 适用于大多数常见情况。

我用它来检查页面是否包含可见文本(只需在 body 元素上运行它),但它可能也适用于这个示例。

【讨论】:

我发现这段代码是一个有用的开始。但是你不想替换 moreResultText += lookup($(value), text); with moreResultText += lookup($(value), '');如果不是,您将重复原始文本值。 我很高兴你发现它很有用:),我觉得这个答案提供了一个更好/更完整的方法来完成所请求的功能,而不是其他更高投票的答案。至于代码,我没有观察到这种行为,它是 DFS,所以它应该将每个较低级别的文本添加到字符串中,最终将其传递给父调用者,直到你有一个包含所有文本的大字符串。您是否有一个不起作用的示例,可能是JSFiddle?【参考方案6】:

在现代浏览器中试试这个(这里的“元素”是一个非 JQuery DOM 对象):

function getVisibleText(element) 
    window.getSelection().removeAllRanges();

    let range = document.createRange();
    range.selectNode(element);
    window.getSelection().addRange(range);

    let visibleText = window.getSelection().toString().trim();
    window.getSelection().removeAllRanges();

    return visibleText;

然后:

getVisibleText(document.getElementById('output'));

【讨论】:

$('#output *:not(:has(*)):visible').text() jQuery 答案由于某种原因错过了一些文本。这个拾取了所有可见的内容(除了 ::before 伪元素中生成的内容,我不太担心)。 验证您的输入!如果您查询输入元素,它可能是 null ? 很好的答案。

以上是关于JavaScript或jquery获取frame的元素的值?的主要内容,如果未能解决你的问题,请参考以下文章

Js/Jquery获取iframe中的元素

如何使用 jQuery(或 Javascript)获取可见文本?

使用 JavaScript 或 jQuery 获取当前月份的第一个和最后一个日期 [重复]

使用 javascript 或 Jquery 获取 textarea 文本

使用 jQuery 或 Javascript 获取括号内的字符串

如何使用 javascript 或 jquery 仅从字符串中获取所有 HTML 标记? [关闭]