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>

代码会在新标签中打开该选项的网址。它在桌面网站上运行良好，但在移动版Safari中尝试它不起作用。

Answer 1

我不相信window.open会在ios safari中运行。您可以使用jquery触发隐藏链接上的单击事件

<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);
  }
};

在移动设备上选择“onchange”事件

3 个答案: