首页 > 解决方案 > Framework7 + Cordova | 使 iframe 打开本地文件

问题描述

今天是个好日子。

我正在使用 Framework7 制作应用程序。有路由。我得到了组件“page.f7.html”和名为“1”的文件夹,里面有“index.f7.html”和文件夹“data”,里面有“script.js”(.pptx文件转换为.html)。

--page.f7.html
--1
  |
  --index.f7.html
  --data
    |
    --scripts.js

我需要将 iframe 添加到我的组件中,所以我的 page.f7.html 如下所示:

<template>
    <div class="page">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner sliding">
                <div class="left">
                    <a href="#" class="link back">
                        <i class="icon icon-back"></i>
                        <span class="if-not-md">Back</span>
                    </a>
                </div>
                <div class="title">Задача 1</div>
            </div>
        </div>
        <div class="page-content">
            <iframe style="width: 100vw;height: calc(100vh - 110px);" id="frame-pptx" src="/lessons/tasks/1/index.f7.html" frameborder="0"></iframe>
        </div>
    </div>
</template>
<script>
    export default () => {
        return $render;
    };
</script>

但是,iframe 不起作用。我得到的错误是:

    屏幕:
    无法获取 /lessons/tasks/1/index.f7.html
    
    安慰:
    加载资源失败:服务器响应状态为 404(未找到)
    http://localhost:8080/lessons/tasks/1/index.f7.html

我尝试了另一种选择 - 路由到 index.f7.html

<iframe style="width: 100vw;height: calc(100vh - 110px);" id="frame-pptx" src="/lessons/tasks/cont/1/" frameborder="0"></iframe>

在这里我从控制台收到两个错误:

    [错误] 加载资源失败:服务器响应状态为 404(未找到)(http://localhost:8080/lessons/tasks/cont/1/js/app.js,第 0 行)
    [错误] 拒绝执行 http://localhost:8080/lessons/tasks/cont/1/js/app.js 作为脚本,因为给出了“X-Content-Type-Options: nosniff”并且它的 Content-Type 不是脚本 MIME 类型。

由于某些原因使得寻求 js/app.js

我正在寻求您的帮助或建议。我需要更改或修复什么?

标签: cordovawebpackrouteshtml-framework-7

解决方案


推荐阅读