Мне было интересно, если возможно добавить внешний javascript или css внутри iframe, у меня есть iframe на нашем веб-сайте, сгенерированный из чата zendesk стороннего приложения, и мне нужно изменить значок и текст внутри него.
<iframe id="webWidget" tabindex="0">
<html>
<head></head>
<body>
<div id="Embed">
<div class="src-component-Launcher-wrapper u-isActionable u-textLeft u-inlineBlock u-borderNone u-textBold u-textNoWrap Arrange Arrange--middle u-userLauncherColor ">
<!-- This is the icon -->
<span class="src-component-Icon-container src-component-Launcher-icon src-styles-components-Icon-Icon Arrange-sizeFit u-textInheritColor u-inlineBlock Icon" type="Icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path>
</svg>
</span>
<!-- This is the text -->
<span class="src-component-Launcher-label Arrange-sizeFit u-textInheritColor u-inlineBlock ">
Support
</span>
</div>
</div>
</body>
</html>
</iframe>
Я успешно изменил текст с «Поддержка» на «Связаться с отделом продаж» с помощью этого кода
$(document).ready(function(){
zE(function(){
$zopim(function(){
$("#launcher").css('width', 'auto');
$("#launcher").contents().find("span.src-component-Launcher-label").text('Contact Sales');
});
});
});
Но теперь проблема в том, что значок svg
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path>
</svg>
Есть ли способ изменить его, используя jQuery или javascript?Есть ли способ добавить bootstrap / font-awsome внутри этого iframe и заменить svg на что-то подобное?
PS: я знаю, что могу вставить css и js в iframe, однако проблема в том, чтоУ zendesk есть средства безопасности, которые не позволяют это сделать.
Спасибо!