HTML uses a common head navigation

Write the company's official website, found that the navigation and carousel every page has, the first thought is to use Vue routing to achieve, and then take into account the SEO problem, need to use NUXT, and then think of the trouble is no use, and then think of the IFRAME (but the IFRAME has blocked the loading of the page and other shortcomings, Not used)
Let's say the IFRAME automatically adapts to the height of the problem
Add the following code to the sub-page :

    var oIframe = window.top.document.getElementById("mainiframe");    var oBody = document.getElementsByTagName("body")[0];    oIframe.style.height = oBody.offsetHeight + ‘px‘;

If the iframe on the main page is dynamic, the main page needs to add the following code:

   function loadPage(path) {        document.getElementById("mainiframe").src = path    }

Finally, we used the JQ load.
However, when the load is accessed locally, there are cross-domain issues that need to be accessed on the server, or the error is as follows:

The Load method is as follows:

   function loadPage(path) {        $(‘.page‘).load(path)    }

HTML uses a common head navigation