Question

我想将html标记注入不同平台中多个站点的div中。理想情况下，每个开发人员都可以在我的js中插入脚本标记。让我们假设每个应用程序都有bootstrap和jquery。

<script id="globalheaderapi" src="https://www.url.com/globalheader.js"></script>

和html在应用程序上只会是这样的

<header id="globalHeader"></header>

我想在标题中插入我的html标记。我还想让js插入到css源的链接。

问题是，应用程序只有jquery。

 $( document ).ready(function() {
  //insert link to header css   
    $('head').append('<link rel="stylesheet" href="globlalHeader.min.css" type="text/css" />');

 //insert html in div
 $( "#globalHeader" ).html( "<nav><ul><li><a href="link">Home</li><li><a href="link">About</li></ul></nav>" );
 });

更新

我尝试了$( "#globalHeader" ).load(...如果js和app在同一个域中，如果我在不同的域中尝试它，我会得到crosssite错误

   XMLHttpRequest cannot load http://url . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Answer 1

理所当然地认为在你的环境中有足够的理由不仅仅使用服务器端包含或更直接的东西，jQuery的.load()似乎适合你。你只需要删除你想要注入的HTML，让每个页面都像这样调用它：

$("#globalHeader").load('globalHeader.html');

您的CSS注入看起来很好，但我很好奇为什么如果您有权访问该网站以插入脚本标记，则不能只添加链接标记。

Answer 2

如果他们在该global-header中有其他内容，.html（）将覆盖它。
更好的方法是将您的内容作为孩子附加。

unblurPresentedView()

你的CSS链接添加看起来不错。

Answer 3

首先，请记住，如果您将css链接附加到标题，几乎所有现代浏览器都会加载并解析该css，但您没有机会知道何时。这意味着您注入的html可以在不可预测的时间间隔内显示为无样式。

您可以尝试缓解隐藏内容并稍后在超时后使用.show（）调用显示它，但无论如何（1）大多数时候您会延迟超过必要的时间（2）很多次可能不会到足够多。

所以，如果你的css不是很大，我建议你用jquery的.css（）方法应用它，然后在你的容器上做一个.show（）。

关于使用.load（）的crosssite错误，我认为存在一个禁用该警告的参数（但我不记得是什么，也不确定我是否错了）。但是，无论如何，您可以实现相同的行为，只需通过.ajax（）调用获取html，然后使用.append（）（或将其替换为.html（））附加到容器的内容中。

Answer 4

XMLHttpRequest适用于不同的域名。但是，服务器应配置为允许这些请求。浏览器在检查HTTP标头后拒绝此请求。

假设您的代码如下：

$( "#globalHeader" ).load("http://somedomain.com/path")

在somedomain.com网站上运行的代码应返回相应的标题，如：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

第一行Access-Control-Allow-Origin: *允许任何其他域发出请求。您还可以使用此标头限制这些域，如

Access-Control-Allow-Origin: micrositeA.com, micrositeB.com, micrositeC.com

你的http服务器应该允许OPTIONS方法工作（应该检查这个）。您可以查阅您的http服务器文档如何实现此目的。

您可以在此条目中查看CORS（跨站点HTTP请求）

How does Access-Control-Allow-Origin header work?

和

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

如何在任何应用程序中使用jquery注入html标记？

4 个答案: