html: 在不打开新页面或离开当前页面的情况下显示本地化页面内容

Question

目标

我正在开发一个本地化的帮助文档页面套件，入口页面顶部有一个导航栏。每个本地化页面都是一个独立的 html 文件，它们的内容将一次一个地显示在导航栏下方。

代码

入口页面是这样的

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self' 'unsafe-inline';
        script-src 'self' 'unsafe-inline';
        connect-src *">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1"> -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <title>My App: Help</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script type="text/javascript" src="help.js" type="module"></script>
</head>

<body>
    <!-- 
===============
Nav
===============
-->
    <nav class="grouping">
        <!-- wrap with flexbox to extend navbar to logo -->
        <div class="nav__flex">
            <ul class="nav__menu">
                <li class="nav__target pad">
                    <a></a>
                </li>
                <li class="nav__target"><a class="nav__link" href="home.html" onclick="ActivateSingleTab(this)">Guests</a></li>
                <li class="nav__target"><a class="nav__link" href="account.html" onclick="ActivateSingleTab(this)">Log</a></li>
                <li class="nav__target"><a class="nav__link active" href="#" onclick="ActivateSingleTab(this)">Help</a></li>
                <li class="nav__target"><a class="nav__link" href="action.html" onclick="ActivateSingleTab(this)">Settings</a></li>
            </ul>
            <ul class="nav__about">
                <li class="nav__target">
                    <a class="nav__link" href="about.html">
                        <img class="nav__logo" src="images/btn-about.png" role="button" onclick="ActivateSingleTab(this)">
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!--
==================
Mainframe: content
==================
-->
    <!-- placeholder to push mainframe down below navbar-->
    <div class="pad-frametop"></div>
    <div class="mainframe">
        <a href="./help_en.html">English</a>
    </div>
    </div>
    <div class=status-bar>
        0 Guest online
    </div>
</body>

</html>

问题

因此我的设计排除了超链接的使用，例如上面源代码中的 <a href="help_en.html">，这将重定向并且导航栏消失。

尝试

我能想到的唯一解决方案

通过从本地化文件中插入特定于语言的 DOM 树来破解入口页面
通过在导航栏前添加本地化文件

这两种方法都会引入代码重复。

问题

将外部 html 文件内容嵌入“框架”页面的优雅解决方案是什么？

Answer 1

使用 iFrame 嵌入您的页面：

<iframe src="help_en.html" title="heplsite"></iframe>

或对象：

<object data="help_en.html" type="text/html"></object>

或使用嵌入标签：

<embed src="help_en.html" type="text/html"/>

html: 在不打开新页面或离开当前页面的情况下显示本地化页面内容

html: show localized page content without opening new page or leaving current page

html

javascript

localization

目标

代码

问题

尝试

问题