Question

如何定位和设置我网站上的iframe并更改内联值？

<iframe class="preview_iframe">
<div id="example">
<a id="ex">
<svg fill="#000000"></svg>
</a>
</div>
</iframe>

我需要在iframe中定位一个SVG（多个）并用jquery更改填充（颜色），我怎么能这样做但我似乎没有选择它。

继续尝试的jquery

         $("[id^=like_iframe_]").load(function() {
            var frame = $("[id^=like_iframe_]").contents();
            $("svg", frame).css({'fill' : 'red'});
           });

和

$("[id^=like_iframe_]").contents().find("svg").css({'fill' : 'red'});

选择框架，但它没有改变svg的颜色

Answer 1

我发现以下内容（见下文）对我有用：

<html><head>
<script type="text/javascript" src="Downloads/jquery-1.10.2.min.js"></script>
<script type="text/javascript">function tryit(){
  $("iframe[id$=iframe]").contents().find("ellipse").css({fill:"red"});
}</script>
</head><body>
<a href="#" onclick='tryit()'>click here</a><br/>
<iframe id="preview_iframe" src="stackoverflow19846765_iframe.html">
This text won't show if browser supports IFRAMEs(?).</iframe>
</body></html>

文件stackoverflow19846765_iframe.html读取：

<html><head></head><body>
<div id="example"> <a id="ex" onclick="alert('clicked svg')">
<svg fill="#000000"> 
  <ellipse cx="110" cy="60" rx="100" ry="50" style="fill:blue" />
</svg>
</a> </div>
</body></html>

我必须为src使用iframe属性（并将源放在单独的文件中）。（否则iframe显示为空。）

id上的选择器似乎与代码中的HTML片段（使用class）不匹配（？）。我使用iframe id=并使用id*=iframe选择了它。

我必须在svg内放置一些内容才能看到发生的事情。

注意：使用本地文件尝试代码时，只有Firefox可以让我查看iframe。 Chrome会因本地文件的原始策略而阻止此操作。

如何使用jquery在iframe中定位项目

1 个答案: