Respond.js on Subdomain using Tumblr

2019-05-24 04:09发布

问题:

My website is responsive. The blog section uses a subdomain pointing to Tumblr, but the cross-domain version of Respond.js isn't working. I'm doing this:

<script src="http://www.stevechab.com/scripts/respond.min.js"></script>
<link href="http://www.stevechab.com/scripts/respond-proxy.html" id="respond-proxy" rel="respond-proxy">
<link href="http://www.stevechab.com/scripts/respond.proxy.gif" id="respond-redirect" rel="respond-redirect">
<script src="http://www.stevechab.com/scripts/respond.proxy.js"></script>

I assume the problem is that respond.proxy.gif and respond.proxy.js aren't on blog.stevechab.com ... but doesn't that defeat the purpose of having a cross-domain version of Respond.js? Is my assumption right, or am I missing something? Is there a work around for this?

Note: I tried http://www.tumblr.com/themes/upload_static_file ... no dice.

回答1:

To quote the respond.js readme:

Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.

– my emphasis. The cross-domain version is meant to enable you to process stylesheets loaded from another domain than the one respond.js is working on. In the case of Tumblr, however, you have a third domain added to the mix: static.tumblr.com, where your proxy script and gif have landed. That cannot, and will not, work.



回答2:

@Steve Chab,

There are two reasons respond.js & respond.proxy.js were not working for you.

  1. You had the respond-proxy.html file in the origin domain, whereas the file should have been served from your sub-domain (blog.stevechab.com) or any other external domain.

  2. There seems to be a bug with respond.js / respond.proxy.js when linking to a css file with a relative url. To fix it, use an absolute url. Your main site uses a relative url for the css stylesheet, and your blog an absolute url.

    • Note: Bug is caused by respond.proxy.js ajax/xml functions


Please find below, the re-vised working markup to get respond.js & respond.proxy.js working on your website.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://www.stevechab.com/styles/styles.css">
<!--[if (lt IE 9) & (!IEMobile 7)]>
<link href="//blog.stevechab.com/scripts/respond-proxy.html" id="respond-proxy" rel="respond-proxy">
<link href="//www.stevechab.com/scripts/respond.proxy.gif" id="respond-redirect" rel="respond-redirect">
<![endif]-->
</head>
<body>
<!-- Your content goes here. -->

<!--[if (lt IE 9) & (!IEMobile 7)]>
<script src="//www.stevechab.com/scripts/respond.min.js"></script>
<script src="//www.stevechab.com/scripts/respond.proxy.js"></script>
<![endif]-->
</body>
</html>
  • Respond.js on GitHub
    • http://github.com/scottjehl/Respond

  • Respond.js Plugin for Wordpress
    • http://wordpress.org/plugins/respondjs/

  • Respond.js used by Twitter Bootstrap
    • http://getbootstrap.com/getting-started/