Question

Normaly我在html中加载了一个javascript文件：

<script src="v/0.2/strapdown.js"></script>

此文件strapdown.js本身加载css文件（第69-83行）：Github > strapdown.js

  // Stylesheets
  var linkEl = document.createElement('link');
  linkEl.href = originBase + '/themes/'+theme+'.min.css';
  linkEl.rel = 'stylesheet';
  document.head.appendChild(linkEl);

  var linkEl = document.createElement('link');
  linkEl.href = originBase + '/strapdown.css';
  linkEl.rel = 'stylesheet';
  document.head.appendChild(linkEl);

  var linkEl = document.createElement('link');
  linkEl.href = originBase + '/themes/bootstrap-responsive.min.css';
  linkEl.rel = 'stylesheet';
  document.head.appendChild(linkEl);

现在我想用jQuery.getScript()动态加载这个javascript文件：

$.getScript("v/0.2/strapdown.js").done( function(  ) { console.log( "loaded" ) } );

加载了javascript文件，但它没有加载css文件。

当我直接在html文件中声明css文件时，它可以工作：

  <link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen" charset="utf-8">

但是我想动态地拥有它，因为它之前有效。

带有缺少的css文件的代码。可在Github > test.html

上找到

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Jerik's this and that</title>
  <meta name="description" content="Some stuff that I want to mention" />
  <!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
  <!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
  charset="utf-8"-->
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
    function showmd( value ) { 
        $( "xmp" ).html( value );
        $.getScript("v/0.2/strapdown.js").done( function(  ) { console.log( "loaded" ) } );
    }
    $.get( "readme.md", function( data ) {
        showmd( data );
    }, 'text');
</script>
</body>
</html>

如何通过原始脚本动态加载css文件，我通过jQuery.getScript（）加载？

Answer 1

如果您尝试使用Ajax加载本地资源，则会遇到浏览器安全性问题。

这是我在没有修改的情况下使用您的代码时遇到的问题。

以下是我用来使其工作的代码：

public class TabFragment extends BaseFragment implements ViewPager.OnPageChangeListener, View.OnClickListener {
    public static ViewPager mViewPager;
    private Button mButtonMassage;
    private RadioGroup mRadioGroup;

    public static TabFragment newInstance() {
        return new TabFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
        initUi(rootView);

        return rootView;
    }

    @Override
    public void initUi(View rootView) {
        mRadioGroup = (RadioGroup) rootView.findViewById(R.id.radio_group);
        mViewPager = (ViewPager) rootView.findViewById(R.id.view_pager);
        mButtonMassage = (Button) rootView.findViewById(R.id.buttonMassage);

        initListeners();
    }

    @Override
    public void initListeners() {
        mButtonMassage.setOnClickListener(this);
        mViewPager.addOnPageChangeListener(this);
        initData();
    }

    @Override
    public void initData() {
        mViewPager.setAdapter(new ViewPagerAdapter(getChildFragmentManager()));
        mViewPager.setCurrentItem(0);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.buttonMassage:
                Intent i = new Intent(getActivity(), MassageActivity.class);
                startActivity(i);
                break;
            default:
                break;
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        mRadioGroup.check(mRadioGroup.getChildAt(position).getId());
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

Answer 2

找到适用于http和https请求的解决方案。我创建了一个包含所需信息的script代码，并将其附加到head代码中。 Firebugs报告了一个警告Synchrone XMLHttpRequests in the Main-Thread should not be used...，但它对我有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Jerik's this and that</title>
  <meta name="description" content="Some stuff that I want to mention" />
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
    function showmd( value ) { 
        $( "xmp" ).html( value );
        $( 'head' ).append( '<script src="v/0.2/strapdown.js"><\/script>' );
    }

    $.get( "readme.md", function( data ) {
        showmd( data );
    }, 'text');
</script>
</body>
</html>

通过jQuery动态加载css文件不起作用

2 个答案: