0

所以我使用 trigger.io 创建一个页面，底部有一个自定义菜单，每个按钮将一个外部 HTML 页面加载到主容器中。我不得不四处寻找才能完成这项工作，所以我想知道是否有更好的方法来做到这一点。

我开始使用$('.main').load('pages/test.html')它，它不起作用。相反，我必须这样做：

forge.file.getLocal('pages/test.html', function (file) {
  forge.file.string(file, function (str) {
    $('.main').html(str);
  });
});

这有点乱。

此外，如果将strHTML 内容作为img标签，则 img 不会显示，因为该src属性被弄乱了。所以我不得不做另一个黑客：

forge.file.getLocal('pages/test.html', function (file) {
  forge.file.string(file, function (str) {
    var $main = $('.main');
    $main.html(str);

    //Hack to resolve img src
    var imgPath;
    $main.find('img').each(function () {
      var $this = $(this);
      // First 8 chars is "file:///"
      imgPath = $this.prop('src').substr(8);
      forge.file.getLocal(imgPath, function (file) {
        $this.prop('src', file.uri);
      });
    });
  });
});

有什么更好的方法可以轻松地完全加载外部 HTML 页面？

谢谢！

4

1 回答 1

1

在 Android 4.1 和 iOS（iPhone 模拟器和 iPad）上使用 forge 平台 v1.4（在撰写本文时为 v1.4.18）进行测试，我似乎能够毫不费力地使用 jQuery 的加载方法。这是我的测试用例的结构：

src/
  index.html
  face.png
  pages/
    hello.html

以下是内容index.html

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.content').load('pages/hello.html');
    });
</script>
</head>
<body>

<div class="content">
</div>

</body>
</html>

并且pages/hello.html：

<b>hello world</b><img src="face.png">

这导致应用程序启动后出现这种情况： 使用 $.fn.load 的结果

我可以看到这种方法的一个问题是标签的src属性img必须相对于index.html. 如果您仍然遇到问题，那么更具体的测试用例和/或使用的伪造平台版本的详细信息以及您测试的设备/模拟器可能会很有用。

于 2012-10-25T09:42:23.770 回答