# HTML前端開發雜貨鋪
###### tags: `html` `雜貨鋪` `待整理`

## iframe
### iframe空白問題
猜測是跑太快，都還沒跑完就下一步了 XD
所以要讓她緩緩一步一步來 ?

先設定成空白頁，再設定成目標頁面，不要在同一行內同時進行，拆成兩行~

// javascript (jquery)
myModal.find('.modal-content').html('<iframe src="about:blank" name="loadPage" id="loadPage" style="width:100%" height="' + (window.innerHeight * 0.8) +'"></iframe>');
 
$('iframe[name=loadPage]').attr("src", url); // 一定要分開處理，不然第二次開始就是空白頁

另一個方法是透過計時器，

// javascript
setTimeout("document.frames['" iframeID "'].location.href='" + url + "';", 0);

### 執行上層方法失敗(能抓到變數但無法執行方法)

iframe的內容跳頁後，
雖然還是能抓到上層js的變數
就無法執行上層js的方法了...
也就是說上層的變數或方法，
全都被當成變數了...
輸出的話會把方法的整個定義都當作字串輸出了

解決方法1：
直接呼叫上層的方法會直接輸出方法的字串，
那麼就透過eval來重新載入
最後在呼叫即可~

<!-- html -->
onclick="eval(parent.closeModal());parent.closeModal();"

解決方法2：
發現這個方法還可以用，
那就直接重新整理吧XD

<!-- html -->
onclick="parent.location.reload();"

## select 多選

1. 使用套件bootstrap-select來達成多選
2. 透過 onchange + input:hidden 繞過後台只抓到一筆的問題
(注意id跟name的位置)

<!-- html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/js/bootstrap-select.min.js"></script>
<script>
    $(function() {
        $(".selectpicker").selectpicker({
            noneSelectedText: '請選擇' //預設顯示內容
        });
    });
</script>

<input type="hidden" name="stages" value="">
<select class="form-control selectpicker" id="stages" multiple onchange="$('input:hidden[name=stages]').val($(this).val().join(','))">
    <option value="">請選擇</option>
    <option value="1">請選擇1</option>
    <option value="2">請選擇2</option>
    <option value="3">請選擇3</option>
</select>