Можно ли динамически добавлять ресурсы (CSS, JS, иконки и т. Д.) Внутри iframe? - PullRequest
0 голосов
/ 11 мая 2018

Мне было интересно, если возможно добавить внешний 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 есть средства безопасности, которые не позволяют это сделать.

Спасибо!

...