在iframe上操作CSS

时间:2018-11-14 07:40:09

标签: html css angular less

我已经//span[@class="b-properties__label" and span="VendorCode"]/following-sibling::span/text() 将外部网站嵌入到我的网站中,但是我的文字,按钮和内容很大。

我的内容图片:

enter image description here

内容的代码:

 (function ($) {
        $.fn.FeedEk = function (opt) {
            var def = $.extend({
            MaxCount: 5,
            ShowDesc: true,
            ShowPubDate: true,
            DescCharacterLimit: 0,
            TitleLinkTarget: "_blank",
            DateFormat: "",
            DateFormatLang:"en"
        }, opt);

        var id = $(this).attr("id"), i, s = "", dt;
        $("#" + id).empty();
        if (def.FeedUrl == undefined) return;       
        $("#" + id).append('<img src="loader.gif" />');

        var YQLstr = 'SELECT channel.item FROM feednormalizer WHERE output="rss_2.0" AND url ="' + def.FeedUrl + '" LIMIT ' + def.MaxCount;

        $.ajax({
            url: "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(YQLstr) + "&format=json&diagnostics=false&callback=?",
            dataType: "json",
            success: function (data) {
                $("#" + id).empty();
                if (!(data.query.results.rss instanceof Array)) {
                    data.query.results.rss = [data.query.results.rss];
                }
                $.each(data.query.results.rss, function (e, itm) {
                    s += '<li><div class="itemTitle"><a href="' + itm.channel.item.link + '" target="' + def.TitleLinkTarget + '" >' + itm.channel.item.title + '</a></div>';

                    if (def.ShowPubDate){
                        dt = new Date(itm.channel.item.pubDate);
                        s += '<div class="itemDate">';
                        if ($.trim(def.DateFormat).length > 0) {
                            try {
                                moment.lang(def.DateFormatLang);
                                s += moment(dt).format(def.DateFormat);
                            }
                            catch (e){s += dt.toLocaleDateString();}                            
                        }
                        else {
                            s += dt.toLocaleDateString();
                        }
                        s += '</div>';
                    }
                    if (def.ShowDesc) {
                        s += '<div class="itemContent">';
                         if (def.DescCharacterLimit > 0 && itm.channel.item.description.length > def.DescCharacterLimit) {
                            s += itm.channel.item.description.substring(0, def.DescCharacterLimit) + '...';
                        }
                        else {
                            s += itm.channel.item.description;
                         }
                         s += '</div>';
                    }
                });
                $("#" + id).append('<ul class="feedEkList">' + s + '</ul>');
            }
        });
    };
})(jQuery);

如何处理内容?

2 个答案:

答案 0 :(得分:0)

设置iframe内容的样式就像设置任何其他网页的样式一样。但是,您必须有权编辑页面。如果您无法编辑页面(例如,它在另一个站点上)。

如果您可以编辑页面,则可以像在网站上为任何其他网页设置样式一样,在文档中添加一个或多个外部样式表。

Reff。 -https://www.lifewire.com/iframes-and-css-3468669

答案 1 :(得分:0)

  1. 只需使用php(php bot)中的内容
  2. 在加载内容后将类添加到按钮中jQuery

Jquery示例;

onViewCreated()
$("#fancybox-frame").load(function(){
    $('#fancybox-frame').contents().find("a").css("background-color","#BADA55");
});