Question

我正在构建一个Vue JS插件，该插件将加载到多个网站中，这些网站是Laravel，Cake PHP和Nuxt JS。我需要通过已加载的插件组件在网站上查找并替换iFrame的源。从技术上讲，我只需要在iFrame源中找到并替换两个参数，它们分别是：aff_id和sub_id，现在，我正在寻找替换iFrame的整个源。 / p>

页面加载后，iFrame源最初会有所不同。

我编写了一个Vue JS方法，该方法在单击插件中的按钮时运行，然后在页面上找到具有多个潜在ID之一的iFrame，然后搜索iFrame URL，选择一些参数，然后为它们设置新值，然后将完整的新网址加载到iFrame中。

我编写的Vue JS方法如下：

setTrackingData() {
      // get application form
      var applicationForm = document.getElementById('ptframe') || document.getElementById('iframe') || document.getElementById('frame')

      // construct a variable to allow us to search and set data
      var applicationFormUrl = new URL(applicationForm.src)

      // search the url
      var query_string = applicationFormUrl.search

      // search params
      var search_params = new URLSearchParams(query_string)

      // set new data on iFrame source
      search_params.set('aff_id', this.trackingID)
      search_params.set('sub_id', this.siteID)

      // change the search property of the main url
      applicationFormUrl.search = search_params.toString()

      // the new url string
      var new_url = applicationFormUrl.toString()

      // set the new source with data
      applicationForm.src = new_url
    }

考虑所有事情，这非常简单。它从this.trackingID和this.siteID获取一些数据，这些数据只是String。

我希望不重新加载iFrame，但是正在重新加载。输出正确，例如：http://example.com?sub_id=TEST，但是重新加载了iFrame，我知道这是替换iFrame源的预期行为。

如何解决这个问题？

替换iframe网址/参数，而无需重新加载iFrame

0 个答案: