Apache Cordova实现点击导航后在Div内加载外部网站

嘿，我完全懂你的需求——你现在在Cordova App的assets\www\index.html里加了自定义导航，希望用户点击导航链接时，网页内容能在导航下方加载，而不是直接用InAppBrowser的_self替换掉整个页面，丢失你写的导航栏对吧？

下面给你两种实用的解决方案，优先推荐第一种，简单又直接：

方案一：用iframe嵌入网页（最推荐） #

这种方法能让你的导航栏始终固定在页面顶部，网页内容在下方的iframe里加载，完美保留导航的同时切换内容。

1. 修改index.html结构 #

先在你的导航下方添加一个用来承载网页内容的容器，里面放一个iframe：

<!-- 你的自定义导航 -->
<a href="javascript:load_web('https://example1.com')" >Web 1</a>
<a href="javascript:load_web('https://example2.com')" >Web 2</a>

<!-- 网页内容容器 -->
<div id="web-content-wrapper">
  <iframe id="web-frame" width="100%" height="100%" frameborder="0"></iframe>
</div>

2. 添加CSS适配全屏 #

给容器和iframe加样式，让内容占满导航下方的所有空间：

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#web-content-wrapper {
  flex: 1;
  overflow: auto; /* 内容过长时可滚动 */
}
#web-frame {
  width: 100%;
  height: 100%;
}

3. 修改load_web函数 #

不再调用InAppBrowser，而是直接更新iframe的src：

function load_web(URL) {
  document.getElementById('web-frame').src = URL;
}

关键配置：允许导航到目标域名 #

别忘了在Cordova的config.xml里添加允许导航的规则，否则iframe可能加载不了外部网站：

<allow-navigation href="https://example1.com/*" />
<allow-navigation href="https://example2.com/*" />

注意：如果目标网站设置了X-Frame-Options禁止嵌入，这种方法就会失效。遇到这种情况可以试试下面的方案二。

方案二：给InAppBrowser注入自定义导航 #

如果必须用InAppBrowser（比如需要它的缓存或沙箱特性），可以在打开的网页里注入你的导航栏，让它固定在顶部。

修改你的load_web函数：

function load_web(URL) {
  // 用_blank打开新的InAppBrowser窗口
  const browser = cordova.InAppBrowser.open(URL, '_blank', 'location=no,clearsessioncache=yes');
  
  // 监听页面加载完成事件，注入导航栏
  browser.addEventListener('loadstop', () => {
    browser.executeScript({
      code: `
        // 创建导航栏容器
        const navBar = document.createElement('div');
        navBar.style.cssText = \`
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          background: #ffffff;
          padding: 12px 16px;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          z-index: 9999;
        \`;
        
        // 创建导航链接
        const link1 = document.createElement('a');
        link1.textContent = 'Web 1';
        link1.href = 'javascript:void(0)';
        link1.style.marginRight = '24px';
        link1.addEventListener('click', () => {
          window.location.href = 'https://example1.com';
        });
        
        const link2 = document.createElement('a');
        link2.textContent = 'Web 2';
        link2.href = 'javascript:void(0)';
        link2.addEventListener('click', () => {
          window.location.href = 'https://example2.com';
        });
        
        // 把链接加到导航栏
        navBar.appendChild(link1);
        navBar.appendChild(link2);
        
        // 插入到页面最顶部
        document.body.insertBefore(navBar, document.body.firstChild);
        // 给页面内容添加上边距，避免被导航栏遮挡
        document.body.style.paddingTop = '60px';
      `
    });
  });
}

这种方法的好处是保留了InAppBrowser的特性，但缺点是需要注入JS和样式，可能和目标网站的样式冲突，而且如果网站有内容安全策略限制，注入可能失败。

总结 #

优先选方案一，实现简单、体验流畅，完全符合你保留自定义导航的需求；如果目标网站禁止iframe嵌入，再考虑方案二。

内容的提问来源于stack exchange，提问作者Rajinder Chandel