Question

我创建了一个用于在iFrame中显示bing搜索的模态，但它只加载了很少的起始图像（几乎没有3-4）。怎么做才能显示完整的结果。问题是它不加载所有图像只加载少量。

我的脚本代码。

<script>
$(document).ready(function() {
    $("#openSearchModal").click(function() {
        var searchVal = $("#searchValue").val();
        $("#displaySearch").attr("src","http://www.bing.com/images/search?q="+searchVal);

        $("#formModalLabel").html("Displaying results for "+"<span style='color:#09f'>"+searchVal+"</span>");
        $("#dictionary").modal();
    });
});

搜索条形码

<div class="form-group">
<div class="col-md-12">
    <div class="input-group input-search">
        <input type="text" class="form-control"  id="searchValue" name="dictionary" placeholder="Search...">
        <span class="input-group-btn">
            <button class="btn btn-default" id="openSearchModal" type="submit"><i class="fa fa-search"></i></button>
        </span>
    </div>
</div>
</div>

模态代码

<script src="assets/javascripts/forms/examples.validation.js"></script>
<div class="modal fade" id="dictionary" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="formModalLabel"></h4>
        </div>
        <div class="modal-body">
            <iframe id="displaySearch" border="0" width="100%" height="400px" frameborder="0" sandbox=""></iframe>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save Changes</button>
        </div>
    </div>
</div>
</div>

Answer 1

将您的iframe更改为

<iframe id="displaySearch" border="0" width="100%" height="400px" frameborder="0" 
  sandbox="allow-forms allow-popups allow-scripts allow-same-origin">
</iframe>

工作演示：https://codepen.io/creativedev/pen/xzdwgG。

在这里，你需要添加 sandbox =“allow-forms allow-popups allow-scripts allow-same-origin”

IFrame沙盒有助于保护其免受外部内容的影响，从而产生看似来自主网站的令人困惑的弹出窗口。您可以在此处获取详细信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox

Modal不会加载搜索

1 个答案: