javascript - 在 Bootstrap 弹出窗口中显示 iframe

Question

有几个带有隐藏输入的按钮。当用户单击按钮时，它必须显示一个带有 div block 和 iframe 的弹出窗口。其内容的 URL 应由地址 + 隐藏输入的值组成。

要显示的 block 是:

<div id="myPopoverContent">
<div id="outerdiv">
<iframe src="http://ip-score.com/checkip/94.45.43.42" id="innerIframe" scrolling="no"></iframe>
</div>
</div>

但是iframe的src属性值必须由http://ip-score.com/checkip/ + ip (来自隐藏的输入)。

<div id="myPopoverContent">
<div id="outerdiv">
<iframe src="http://ip-score.com/checkip/94.45.43.42" id="innerIframe" scrolling="no"></iframe>
</div>
</div>

这是我的代码:

<a id='pop' data-toggle='popover' data-trigger='focus'>
    Check
    <input id='ip_id' type='hidden' value='94.45.43.42'>
</a>

<a id='pop' data-toggle='popover' data-trigger='focus'>
    Check
    <input id='ip_id' type='hidden' value='83.218.164.204'>
</a>

<script type="text/javascript">
$(document).ready(function() {
    $('[data-toggle=popover]').popover({
        content: function() {
            return $(this).children("#ip_id").val();
        },
        placement: 'bottom'
    });
});
</script>

JsFiddle

Answer 1

一方面，您的标记会很糟糕，因为您有重复的 id 属性。但你的问题的答案很简单。基本上，您只需从 name="ip_id"的子元素中检索值，并在模式内操作 iframe 的 SRC 属性，然后显示它。我还没有测试过这个，但尝试一下:

<a  class='pop'>                  
    Check
    <input name='ip_id' type='hidden' value='94.45.43.42'> 
</a>

<a class='pop' data-toggle='popover' data-trigger='focus'>                  
    Check
    <input name='ip_id' type='hidden' value='83.218.164.204'> 
</a>            

<div class="modal fade" id="popWin">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">
          Popup
        </h4>
        <div id="err"></div>
      </div>
      <div class="modal-body">
        <iframe id="formWin" src="" style="width:500px; height:500px; border:0px; overflow: hidden; scrolling="yes">
        </iframe>            
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script type="text/javascript">
$(document).ready(function(){

    $('.pop').click(function(){
        var srcVal = 'http://ip-score.com/checkip/' + $(this).find('[name="ip_id"]').val()
        $('#formWin').attr('src', srcVal);
        $('#popWin').modal('show');
    });

});
</script>

更新:这就像罪恶一样丑陋，但既然你要求它，这行得通:

$(document).ready(function(){
    var src = 'http://ip-score.com/checkip/'+$(this).children("#ip_id").val();
$('[data-toggle=popover]').popover({
    html : true, 
    content: function () {  
        return $('<iframe height="200" width="200"></iframe>').attr('src', src)

    },

    placement: 'bottom'
});
});

JSFiddle