在手机上选择“ onchange”事件

Question

我有一个由API创建的选择框，其中有几个选项。 这些选项中包含URL值。 盒子的本机代码是这样的：

<select onchange="if(this.value!=''){window.open(this.value);}">
    <option value>Select one</option>
    <option value="http://www.google.com">Google</option>
    <option value="http://www.stackoverflow.com">StackOverflow</option>
</select>

该代码在新选项卡中打开选项的URL。 它在桌面站点上可以正常工作，但是在移动Safari中尝试不起作用。

Answer 1

我不相信window.open可以在ios Safari中使用。 您可以使用jquery触发隐藏链接上的click事件

<a class='hiddenbtn' target="_blank" style='display:none'></a>

<select class='mySelect'>
    <option value>Select one</option>
    <option value="http://www.google.com">Google</option>
    <option value="http://www.stackoverflow.com">StackOverflow</option>
</select>

$( ".mySelect" ).change(function() {
   if(this.value!=''){
     $('hiddenbtn').attr('href',this.value);
     $('hiddenbtn').trigger("click");
   }
});

Answer 2

如果他们不希望弹出窗口，似乎无法绕开手机的弹出窗口阻止程序。 但是，至少有一种方法可以某种程度上规避该问题。 基本上，检查是否可以创建弹出窗口并为其指定焦点，以及是否不能仅更改当前窗口的位置。 最后，这是我使用的代码：

if ( /Android|webOS|iPhone|iPod|Blackberry|Windows Phone/i.test(navigator.userAgent)){
    $('#divID select').each(function(){
        $(this).attr("onchange", "if($(this).val()!=''){var popup=window.open($(this).val());if(!popup||typeof(popup)==='undefined'){window.location=$(this).val();}}");
    })
}

更加易于导航的代码如下：

if ( /Android|webOS|iPhone|iPod|Blackberry|Windows Phone/i.test(navigator.userAgent)){
    var onchange=["if ($(this).val()!=''){"];
    onchange.push("    var popup=window.open($(this).val());");
    onchange.push("    if (!popup||typeof(popup)==='undefined'){");
    onchange.push("        window.location = $(this).val();");
    onchange.push("    }");
    onchange.push("}");
    $('#divID select').each(function(){
        $(this).attr("onchange", onchange.join(''));
    })
}

Answer 3

而不是使用onchange属性，我将附加一个事件侦听器：

var select = document.querySelect('select');

select.addEventListener('change', function() {
  var val = select.value || select.options && select.options[select.selectedIndex];

  if ( val ) {
    // try window.open
    var win = window.open(val);
    if ( !win ) {
      // apparently window.open didnt work, use fallback:

      var a = document.createElement('a');
      a.href = val;
      a.target = '_blank';

      // trigger click on a tag:
      triggerEvent(a, 'click');
    }
  }
}, false);

和triggerEvent函数：

var triggerEvent = function(element, eventType) {
  // http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
  var event;
  if (document.createEvent) {
    event = document.createEvent("HTMLEvents");
    event.initEvent(eventType, true, true);
  } else {
    event = document.createEventObject();
    event.eventType = eventType;
  }

  event.eventName = eventName;
  event.memo = {};

  if (document.createEvent) {
    element.dispatchEvent(event);
  } else {
    element.fireEvent("on" + eventType, event);
  }
};