0

如何在我网站上的 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 的颜色

4

1 回答 1

0

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

<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似乎与class代码中的 HTML 片段（使用 ）不匹配（？）。我使用iframe id=并选择了它id*=iframe。

我必须在里面放一些东西svg才能看到任何事情发生。

注意：使用本地文件尝试代码时，只有 Firefox 允许我查看iframe. 由于本地文件的同源策略，Chrome 阻止了这种情况。

于 2013-11-08T09:44:24.057 回答