时间戳

首页 > 解决方案 > getElementsByTagName 不适用于 Cordova 中的 InAppBrowser

javascript - getElementsByTagName 不适用于 Cordova 中的 InAppBrowser

问题描述

我们的网站已加载到我们的 Cordova 应用程序的 InAppBrowser 中，我正在尝试使用这样的 executeScript 获取所有链接标签：

  getAllLinks() {
    inappbrowser.executeScript({
        code: "(function(){ \
            return document.getElementsByTagName('a'); \
        })();"
    },function(values){
        console.log("length values = " + values.length); // length is always 1
        for(var x=0; x < values.length; x++) {
          var href = values[x].href;
          console.log("href = " + href);
        }
    });
  }

// loadstop_handler:
loadstop_handler(evt: InAppBrowserEvent) {
    if (device.platform == "Android") {
      this.getAllLinks();
    }
}

// loadstop handler is added to event listener:
inappbrowser.addEventListener('loadstop', (event) => this.loadstop_handler(event));

但是我没有得到链接。它返回一个空对象，并且 href 始终未定义。打开应用程序时，主页上大约有 10 个链接。我在 loadstop 事件中调用此方法。我们正在使用 Cordova 8.1.0 有人可以帮忙吗？我怎样才能得到链接？

编辑

根据此链接似乎： https ://dbwriteups.wordpress.com/2016/01/24/sharing-data-between-hybrid-app-and-inapp-browser/ 您无法访问该网站的 DOM在 InAppBrowser 中加载。这是一个不同的背景。这就是为什么 document.getElementByTagName 在 executeScript 中返回 undefined 的原因。

所以我应用了上述链接提供的解决方案。这并不理想，因为我必须从网站在本地存储中设置数据（如：在网站代码本身中），如下所示：

// Code executed in website:
setLocalStorageForApp() {
    setTimeout(() => {  // waiting for DOM to load
      let links = document.getElementsByTagName('a');
      var linkArray = new Array<string>();
      for (var x = 0; x < links.length; x++) {
        var href = links.item(x).href;
        linkArray.push(href);
      }
      console.log('Total links = ' + linkArray.length); // result is 63
      localStorage.setItem('linkArray', JSON.stringify(linkArray));
    }, 1000);
  }

然后在 Cordova 应用程序中，我可以从本地存储中获取 a 标签：

var links = null;
inappbrowser.executeScript({ code: "localStorage.getItem('linkArray')" }, function(values) {
  links = JSON.parse(values[0]);
  console.log(links); // prints all 63 links from web page
});

因此，您无法从应用程序访问在 InAppBrowser 中加载的网站的上下文。共享数据（显然包括“文档”）的唯一方法是通过本地存储。如果我有这个错误或有人知道不需要我修改网站本身代码的更好的解决方案，请告诉我。我已经尝试了一切，试图从网站的 DOM 中获取元素，但一切都失败了。

标签： javascriptcordova

解决方案

返回参数始终包装在单个元素数组中。尝试这个：

getAllLinks() {
    inappbrowser.executeScript({
        code: "(function(){ \
            return document.getElementsByTagName('a'); \
        })();"
    },function(values){
        values = values[0]; // destructure single element array
        console.log("length values = " + values.length);
        for(var x=0; x < values.length; x++) {
          var href = values[x].href;
          console.log("href = " + href);
        }
    });
}

推荐阅读