Модал не загружает все изображения для поиска - PullRequest
Новая
       6

Модал не загружает все изображения для поиска

0 голосов
/ 12 июня 2018

Я создал модал для отображения поиска bing в iFrame, но он просто загружает несколько начальных изображений (едва 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>

1 Ответ

0 голосов
/ 12 июня 2018

измените свой 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

...