javascript - Load different header based on current URL - Stack Overflow

admin管理员组

文章数量:1278985

I have four domains - domain, domain, domain.africa and domain. All share the same user base from db and some content. Users can register and log in on any website. Works perfectly. The problem is each website has its own registration and login form, which means when something changes I have to edit each form for each website as they must all work with the same db. What I am trying to achieve is to have one registration and one login form shared by all four domains. I have done that and its working, but I am struggling to load what is specific to each domain, depending on which domain the user is currently on - like the header and footer for that domain.

I am using php with twig (no framework) and have tried various ways to achieve what I want, mostly found online, but none seems to work. I am willing to use twig inside javascript, if necessary. Tried twig inside javascript (if url contains): <script type="text/javascript"> var siteName=document.URL; </script>

<script>
    if (siteName.indexOf("domain1")  != -1) 
      {document.write("include('domains/domain1/includes/header.html')" )}
    else if (siteName.indexOf("domain2")  != -1) 
      {document.write("include('domains/domain2/includes/header.html')")}
    else if (siteName.indexOf("domain3")  != -1) 
      {document.write("include('domains/domain3/includes/header.html')")}
    else if (siteName.indexOf("domain4")  != -1) 
      {document.write("include('domains/domain4/includes/header.html')")}
  </script>

The above only loads domain1 header for all domains. Using twig only:

{% if 'domain1' in url %}
{{ include('domains/domain1/includes/header.html') }}
{% endif %}

AND

{% if url == "; %}
    {% include('domain/location/includes/site.header.html') %}
  {% endif %}

Twig gets no result. In javascript method when I add a string like "domain1" and "domain2", etc for each domain, instead of the twig include function, I get the correct output for each domain I visit. But the moment I add the twig include function the headers, I get the domain1 header loaded for all domains

I have four domains - domain, domain., domain.africa and domain. All share the same user base from db and some content. Users can register and log in on any website. Works perfectly. The problem is each website has its own registration and login form, which means when something changes I have to edit each form for each website as they must all work with the same db. What I am trying to achieve is to have one registration and one login form shared by all four domains. I have done that and its working, but I am struggling to load what is specific to each domain, depending on which domain the user is currently on - like the header and footer for that domain.

I am using php with twig (no framework) and have tried various ways to achieve what I want, mostly found online, but none seems to work. I am willing to use twig inside javascript, if necessary. Tried twig inside javascript (if url contains): <script type="text/javascript"> var siteName=document.URL; </script>

<script>
    if (siteName.indexOf("domain1")  != -1) 
      {document.write("include('domains/domain1/includes/header.html')" )}
    else if (siteName.indexOf("domain2")  != -1) 
      {document.write("include('domains/domain2/includes/header.html')")}
    else if (siteName.indexOf("domain3")  != -1) 
      {document.write("include('domains/domain3/includes/header.html')")}
    else if (siteName.indexOf("domain4")  != -1) 
      {document.write("include('domains/domain4/includes/header.html')")}
  </script>

The above only loads domain1 header for all domains. Using twig only:

{% if 'domain1' in url %}
{{ include('domains/domain1/includes/header.html') }}
{% endif %}

AND

{% if url == "https://domain.africa" %}
    {% include('domain/location/includes/site.header.html') %}
  {% endif %}

Twig gets no result. In javascript method when I add a string like "domain1" and "domain2", etc for each domain, instead of the twig include function, I get the correct output for each domain I visit. But the moment I add the twig include function the headers, I get the domain1 header loaded for all domains

• javascript
• twig

Share Improve this question Follow edited Feb 25 at 11:52 DarkBee 15.6k88 gold badges7272 silver badges116116 bronze badges asked Feb 25 at 10:00 Lesley RichardsLesley Richards 1111 bronze badge 6

• So your code includes all 4 header.html as strings in every page? If the page contains any double quotes you will have a problem if you use document.write(" HTML WITH QUOTES") instead use the code in the answer or use ` instead of " – mplungjan Commented Feb 25 at 12:43
• @mplungjan - As the snippet is currently written, include('domains/domain2/includes/header.html') is just a string. – DarkBee Commented Feb 25 at 15:48
• So it should be {document.write(`{% include('domains/domain1/includes/header.html') %}` )} – mplungjan Commented Feb 25 at 18:12
• Thank you guys. I tried your suggestions, writing it out exactly as done by @mplungjan. It loads the header, but also the header of the other domains. So each domain I visit has four headers. Here is my code for first domain: {document.write({% include('domains/domain1/includes/header.html') %} )}. Are if and else if statements correct? OR != -1 – Lesley Richards Commented Feb 25 at 19:14
• Right click the header and select inspect - you should see something similar to if (siteName.indexOf("domain1") != -1) {document.write(`<h1>Header1<h1>` )} else if (siteName.indexOf("domain2") != -1) {document.write(`<h1>Header2<h1>` )} else if (siteName.indexOf("domain3") != -1) {document.write(`<h1>Header3<h1>` )} else if (siteName.indexOf("domain4") != -1) {document.write(`<h1>Header4<h1>` )} - if not then your header files are incorrect. Or siteName does not contain what you think it does – mplungjan Commented Feb 25 at 20:55

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 1

Make sure your PHP script is passing the url variable to your Twig template.

$url = $_SERVER['HTTP_HOST'];
echo $twig->render('index.html.twig', ['url' => $url]);

This way you can use the url variable in your template.

{% if 'domain1' in url %}
    {{ include('domains/domain1/includes/header.html') }}
{% endif %}

本文标签： javascriptLoad different header based on current URLStack Overflow