Question

所以我使用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);
  });
});

这有点乱。

此外，如果str HTML内容为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页面而没有麻烦？

谢谢！

Answer 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">

在推出应用后刚刚推出了这款产品： Result of using $.fn.load

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

Trigger.io动态加载页面

1 个答案: