javascript - iframe 和 tokenizers 和 css

Question

是否可以根据浏览器传递一个 API 调用不同的 src css？

<iframe @&HIDDEN id="tokenFrame" name="tokenFrame" src="https://@&TOKENURL /itoke/ajax-tokenizer.html?css=input{font-family: arial,tahoma,verdana,sans-serif;font-weight: normal;font-size: 11px;height:10px;width:98px;}%2Eerror{outline: 1px solid red;}&invalidinputevent=true" frameborder="0" scrolling="no" style="width:125px;height:30px;margin-top:-8px;margin-left:-8px;"></iframe>

输入宽度在不同的浏览器中显示不同，我想知道我是否可以根据浏览器传递一定的宽度。我不知道这是否可能，但我想我会问。我需要更改宽度:98px；

@&____ 是我们将变量从后端传递到模板的方式。

Answer 1

所以我想出了一个答案。我有一些检测浏览器的 javascript，然后根据浏览器我根据需要设置元素 src。如果有人对我的想法有更好的想法或批评，请告诉我

<script>
    // Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

    if (isFirefox){
      document.getElementById("tokenFrame").src = "https://@&TOKENURL /itoke/ajax-tokenizer.html?css=input{font-family: arial,tahoma,verdana,sans-serif;font-weight: normal;font-size: 11px;height:10px;width:104px;}%2Eerror{outline: 1px solid red;}&invalidinputevent=true;"
    } else if (isChrome) {
      document.getElementById("tokenFrame").src = "https://@&TOKENURL /itoke/ajax-tokenizer.html?css=input{font-family: arial,tahoma,verdana,sans-serif;font-weight: normal;font-size: 11px;height:10px;width:113px;}%2Eerror{outline: 1px solid red;}&invalidinputevent=true;"
    } else if (isIE) {
      document.getElementById("tokenFrame").src = "https://@&TOKENURL /itoke/ajax-tokenizer.html?css=input{font-family: arial,tahoma,verdana,sans-serif;font-weight: normal;font-size: 11px;height:10px;width:98px;}%2Eerror{outline: 1px solid red;}&invalidinputevent=true;"
    } else if (isOpera){
      document.getElementById("tokenFrame").src = "https://@&TOKENURL /itoke/ajax-tokenizer.html?css=input{font-family: arial,tahoma,verdana,sans-serif;font-weight: normal;font-size: 11px;height:10px;width:113px;}%2Eerror{outline: 1px solid red;}&invalidinputevent=true;"
    } else {
      document.getElementById("tokenFrame").src = "https://@&TOKENURL /itoke/ajax-tokenizer.html?css=input{font-family: arial,tahoma,verdana,sans-serif;font-weight: normal;font-size: 11px;height:10px;width:104px;}%2Eerror{outline: 1px solid red;}&invalidinputevent=true;"
    }

</script>