URLSearchParams not defined error Inside A Function

Question

This is very odd, using DW CC 2018 (in case that is where the problem is), when i use URLSearchParams inside a script tag in my HTML page, it does not get flagged as an "error".

I put URLSearchParams in my external JS file, inside a function, it gets flagged as "not defined". DW flags it as an error, but it still works, so must be more of a "warning" than an error. This has me a bit concerned even if it is a warning, that it could break when going live.

Should I worry, or is it just once of those things to just ignore?

Answer 1

Dreamweaver probably uses an outdated list of "expected globals" in its indexer that isn't updated to include the URLSearchParams API , since it's relatively recent.

If you're not concerned with backwards compatibility *cough* IE *cough* , just add this somewhere in the offending file to get Dreamweaver to shut up:

const URLSearchParams = window.URLSearchParams;

If Dreamweaver doesn't support ES6 syntax (I've never used it), then you must add this somewhere that's not at the top level:

(function () {
  // must be in a closure
  var URLSearchParams = window.URLSearchParams;

  ...
})();

The reason why is because top-level var overwrites the global namespace in some browsers.

Answer 2

you can write custom URLSearchParams class

class UrlSearchParams {
  constructor(query) {
    this.query = query;
  }
  getSearchObject = () => {
    const { query } = this;
    return query
    ? (/^[?#]/.test(query) ? query.slice(1) : query)
      .split("&")
      .reduce((params, param) => {
        let [key, value] = param.split("=");
        params[key] = value
          ? decodeURIComponent(value.replace(/\+/g, " "))
          : "";
        return params;
      }, {})
  : {};
  };
  getAll = () => {
    const searchParams = this.getSearchObject();
    return searchParams;
  }
  get = param => {
    const searchParams = this.getSearchObject();
    return searchParams[param];
  };
  setUrl = (param, value) => {
    const searchParams = this.getSearchObject();
    searchParams[param] = value;
    return Object.keys(searchParams)
    .map(key => key + "=" + searchParams[key])
    .join("&");
  };
}

export default UrlSearchParams;