Upgrade StorageStyling of the output of the web API
I might be missing something fundamental here, but there seems be a huge conceptual problem with the Zotero web API.
With the web API it's possible to output your bibliography with a CSL style as formatted HTML. The problem is that the only way this can be used in an existing website is by embedding in an iframe.
But once the bibliography is inside an iframe, it's basically impossible to alter its appearance with CSS. There are javascripts to inject CSS into an iframe, but from what I've found none of them works across domains. And since the html created by the API always originates from zotero.org, there is no way to get around this restriction.
As I said, maybe I am missing something here, but after many attempts, it seems to me there is no way to influence the appearance of the API's HTML output which makes it much less useful.
With the web API it's possible to output your bibliography with a CSL style as formatted HTML. The problem is that the only way this can be used in an existing website is by embedding in an iframe.
But once the bibliography is inside an iframe, it's basically impossible to alter its appearance with CSS. There are javascripts to inject CSS into an iframe, but from what I've found none of them works across domains. And since the html created by the API always originates from zotero.org, there is no way to get around this restriction.
As I said, maybe I am missing something here, but after many attempts, it seems to me there is no way to influence the appearance of the API's HTML output which makes it much less useful.
This is an old discussion that has not been active in a long time. Before commenting here, you should strongly consider starting a new discussion instead. If you think the content of this discussion is still relevant, you can link to it from your new discussion.
First of all, it's just an API response that gives you HTML. Any site with a server-side component can obviously make an API call and then include the HTML in the output.
But the API also has CORS enabled, so you can even embed it client-side with JavaScript:
<html><head>
<style>
div {
font-family: Garamond;
font-size: 14pt;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="bib"></div>
<script>
fetch('https://api.zotero.org/users/475425/collections/9KH9TNSJ/items/top?format=bib')
.then(function (response) {
return response.text();
})
.then(function (body) {
document.getElementById('bib').innerHTML = body;
});
</script>
</body>
</html>