如何在Ionic 1应用的InAppBrowser中添加自定义底部Div及固定尺寸底部HTML页面

我来帮你一步步搞定这个需求——在Ionic 1的InAppBrowser底部添加固定的自定义Div，并且在这个Div里加载指定的HTML页面。核心思路是利用InAppBrowser提供的insertCSS和executeScript方法，在页面加载完成后注入样式和DOM操作代码。

步骤1：初始化InAppBrowser实例 #

首先，你需要打开目标页面，同时设置合适的窗口选项，比如隐藏默认的工具栏和地址栏，避免和我们的自定义底部栏冲突：

// 打开目标页面，设置必要的窗口参数
var inAppBrowserRef = cordova.InAppBrowser.open(
    'https://your-main-page-url.com', // 替换成你要打开的主页面链接
    '_blank',
    'location=no,toolbar=no,zoom=no,hardwareback=no'
);

步骤2：监听页面加载完成事件 #

只有当InAppBrowser里的页面完全加载完成后，我们才能安全地操作它的DOM。所以要监听loadstop事件：

inAppBrowserRef.addEventListener('loadstop', function() {
    // 在这里注入样式和DOM操作代码
    injectCustomBottomBar(inAppBrowserRef);
});

步骤3：注入自定义底部栏的样式和HTML内容 #

接下来实现injectCustomBottomBar函数，完成两个核心操作：注入CSS样式定义底部栏的外观，然后创建底部Div并加载目标HTML页面（用iframe来加载外部链接）：

function injectCustomBottomBar(browserRef) {
    // 1. 注入CSS样式，确保底部栏固定在底部，并且主页面内容不被遮挡
    browserRef.insertCSS({
        code: `
            .custom-bottom-bar {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 70px;
                background-color: #ffffff;
                border-top: 1px solid #e0e0e0;
                overflow: hidden;
                z-index: 9999;
                margin: 0;
                padding: 0;
            }
            .custom-bottom-bar iframe {
                width: 100%;
                height: 100%;
                border: none;
                display: block;
            }
            /* 给主页面body添加底部边距，避免内容被底部栏遮挡 */
            body {
                margin-bottom: 70px !important;
            }
        `
    });

    // 2. 注入JS代码，创建底部Div并加载目标HTML页面
    browserRef.executeScript({
        code: `
            // 创建底部栏容器
            var bottomBar = document.createElement('div');
            bottomBar.classList.add('custom-bottom-bar');

            // 创建iframe来加载你指定的HTML页面
            var contentIframe = document.createElement('iframe');
            contentIframe.src = 'https://your-bottom-page-url.com'; // 替换成要在底部加载的HTML页面链接

            // 将iframe添加到底部栏
            bottomBar.appendChild(contentIframe);

            // 将底部栏添加到页面body中
            document.body.appendChild(bottomBar);
        `
    });
}

一些关键注意事项 #

• iframe跨域问题：如果要加载的HTML页面不是你自己的域名，需要确保该页面允许被iframe嵌入（即没有设置X-Frame-Options: DENY这类限制头）。如果是自己的页面，可以在服务器端设置X-Frame-Options: SAMEORIGIN或者移除该限制。
• 兼容性测试：记得在iOS和Android设备上分别测试，因为InAppBrowser在不同平台上的DOM结构可能略有差异。
• 静态HTML替代方案：如果不需要加载外部链接，只是要注入静态HTML内容，可以直接设置底部栏的innerHTML，比如：

  bottomBar.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">自定义底部内容</div>';
  

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