1

我有一个 livecore 网站，我正在尝试制作该网站的小工具以在其他网站上显示它的一部分，我面临的问题是如何将我的代码（JavaScript 和 CSS）与我的主机站点的代码隔离开来小工具。我使用这样的“匿名函数”：

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.3') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else { // Other browsers
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) {
    /******* Load CSS *******/
    var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "http://localhost/aaa/widget/widget.css" 
        });
        css_link.appendTo('head');          
        var txt;
        txt='<div id="wrapper">';
        txt=txt+'<ul class="tabs">';
        txt=txt+'<li id="fixtures_tab"><a href="#fixtures">All</a></li>';
        txt=txt+'<li id="live_tab"><a href="#live">Live</a></li>';
        txt=txt+'<li id="finished_tab"><a href="#finished">finished</a></li>';
        txt=txt+'<li id="program_tab"><a href="#program">Program</a></li>';
        txt=txt+'<li id="postpond_tab"><a href="#postpond">Postpond</a></li>';
        txt=txt+'<li id="selected_tab"><a id="f" href="#fav">Selected (0)</a></li>';
        txt=txt+'</ul>';
        txt=txt+'<div class="tab-container">';
        txt=txt+'<div id="fixtures" class="tab-content"><script type="text/javascript">get_All_Today_Matches();</script></div>';
        txt=txt+'<div id="live" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="finished" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="program" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="postpond" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="fav" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'</div>';
        txt=txt+'</div>';
        $('#widget-container').html(txt);
    });
}

})(); // We call our anonymous function immediately

JQuery 一切正常，但 CSS 不正常（CSS 文件已加载并且工作正常，但一些托管站点 CSS 影响了我的 CSS）我无法控制托管站点 CSS，我认为我已经隔离了我的代码使用匿名函数很好，但为什么我的 CSS 会受到网站原始 CSS 的影响？请帮帮我，我已经有一段时间了

4

2 回答 2

2

我知道两种可能的解决方案。

一种是通过iframe. 你的 CSS 不会发生冲突，除非其他网站专门写了一些东西来修改你的 iframe 内的 CSS。但默认情况下，这不会是一个问题。

否则，您必须在MyWidget_所有类/ID 名称的开头添加，以防止与其他站点发生冲突。

于 2013-04-01T11:54:48.823 回答
0

我的解决方案是向my-widget-wrapper顶部元素添加一个类，在这种情况下，我认为它是带有 id 的元素wrapper。

然后将我的样式文件中的所有 css 规则指定为 class 的子项my-widget-wrapper。

例如：将a元素的颜色更改为绿色，而不是 css 规则

a {
    color: green;
}

我会用

.my-widget-wrapper a {
    color: green
}

旁注：当您开发小部件时，切勿在小部件元素中使用固定 ID，因为它会限制您在页面中只有一个小部件实例。不使用id属性来识别元素，而是使用自定义class属性

于 2013-04-01T12:01:02.867 回答