Страницы

Поиск по вопросам

Показаны сообщения с ярлыком iframe. Показать все сообщения
Показаны сообщения с ярлыком iframe. Показать все сообщения

среда, 15 апреля 2020 г.

Как сделать iframe с динамической высотой, задаваемой внутренним содержимым самого фрейма

#html #css #iframe

                    
Добрый день. Как известно iframe кушает лишь четкие указания height в px, а нужно
что-бы вставляемый iframe растягивал родительский элемент, в зависимости от размера
содержимого самого iframe, т.к. содержимое - динамическое. Кто знает какие решения,
простые или сложные (JS, JQ и т.д.)?    


Ответы

Ответ 1



Скрипт вставлять в тот документ который загружается в iframe, не забудьте также подключить в этот файл jQuery (проверял на 1.6.2) Посмотрите еще вот это - http://host.sonspring.com/iframe/

Ответ 2



Работает, но если содержимое больше высоты монитора, то устанавливается высота которая видна, если бы я открыл этот Iframe в отдельном окне.

воскресенье, 15 марта 2020 г.

Высота iframe по контенту

#javascript #html5 #css3 #iframe


Друзья,перелопатил половину интернета, но рабочего решения так и не нашел. В общем,
в iframe необходимо загрузить сайт и взять его высоту, пробовал плагин iFrame Resizer,
высота не менялась, стандартные 150рх, пробовал easyXDM - ошибка, пробовал вот такую штуку

function doIframe() {
  o = document.getElementsByTagName('iframe');
  for (i = 0; i < o.length; i++) {
    if (/\bautoHeight\b/.test(o[i].className)) {
      setHeightIframe(o[i]);
      $(o[i]).load(function() {
        doIframe();
      });
    }
  }
}

function setHeightIframe(e) {
  if (e.contentDocument) {
    $(e).height(e.contentDocument.body.offsetHeight + 35);
  } else {
    $(e).height(e.contentWindow.document.body.scrollHeight);
  }
}

    


Ответы

Ответ 1



Если я правильно понял Ваш вопрос: Вы хотите загрузить в iframe некоторый контент, но проблема в том, что Вы не знаете высоту загружаемого контента, и соответственно не знаете какую высоту iframe-а Вам нужно указать. Я сталкивался с подобной проблемой, когда мы разрабатывали виджеты, например для edx. Вы не можете выставить высоту iframe во "внутренностях" iframe. Как вариант, Вы можете посчитать высоту во "внутренностях" iframe и передать ее в js который подключает iframe в родительском окне. Для того чтобы связать js во "внутренностях" iframe и js в родительском окне, мы использовали библиотеку от Mozilla jschannel. Обратите внимание, что высота загруженного контента не всегда будет одинаковой, к изменению высоты могут привести как изменение ширины окна браузера (если у Вас респонсив страница) так и действия пользователя внутри iframe - все эти кейсы можно решить добавляя новые события к jschannel. В случае если у Вас нет доступа к содержимому iframe и Вы хотите получить его высоту, к сожелению, я не знаю что Вам можно посоветовать, и вообще возможноли это.

пятница, 27 декабря 2019 г.

Как уменьшить размер при загрузке изображения

#php #ajax #изображения #iframe #загрузка


 $h)
                {
                    // Вычисление пропорций
                    $ratio = $h_src/$h;
                    $w_dest = @round($w_src/$ratio);
                    $h_dest = @round($h_src/$ratio);

                    // Создаём пустую картинку
                    $dest = @imagecreatetruecolor($w_dest, $h_dest);

                    // Копируем старое изображение в новое с изменением параметров
                    @imagecopyresampled($dest, $src, 0, 0, 0, 0, $w_dest, $h_dest,
$w_src, $h_src);

                    // Вывод картинки и очистка памяти
                    @imagejpeg($dest, $tmp_path . $file['name'], $quality);

                    @imagedestroy($dest);
                    @imagedestroy($src);

                    return $file['name'];

                } else {
                    // Вывод картинки и очистка памяти
                    @imagejpeg($src, $tmp_path . $file['name'], $quality);
                    @imagedestroy($src);

                    return $file['name'];
                }
            }

            $name = resize($_FILES['picture'], $_POST['file_type'], $_POST['file_rotate']);

            // Загрузка файла и вывод сообщения
            if (!@copy($tmp_path . $name, $path . $name)){
                echo '';
            } else {                        
                echo '';
            }

            unlink($tmp_path . $name);
    }
}
?>

    


Ответы

Ответ 1



Знакомый скрипт загрузки и сжатия картинки, сам с ним долго морочился, наконец переделал его. Вот что - то вроде этого. class download_image { protected $path; protected $tmp_path; protected $types; protected $size; // Функция изменения размера // Изменяет размер изображения в зависимости от type: // type = 1 - эскиз // type = 2 - большое изображение // rotate - поворот на количество градусов (желательно использовать значение 90, 180, 270) // quality - качество изображения (по умолчанию 75%) public function prepare($file) { //Извлекаем путь к папке сайта $path = $_SERVER['SCRIPT_FILENAME']; //Обрубаем ипсолняемый файл в строке $path = str_replace("index.php", '', $path); $path .= "куда грузим"; $path0 = $_SERVER['DOCUMENT_ROOT']; function resize($file, $type = 1, $rotate = null, $quality = null){ global $tmp_path; $w =''; // Ограничение по ширине в пикселях $max_thumb_size = 200; $max_size = 600; if ($quality == null){ $quality = 0; } // Cоздаём исходное изображение на основе исходного файла if ($file['type'] == 'image/jpeg'){ $source = imagecreatefromjpeg($file['tmp_name']); }elseif ($file['type'] == 'image/png'){ $source = imagecreatefrompng($file['tmp_name']); }elseif ($file['type'] == 'image/gif'){ $source = imagecreatefromgif($file['tmp_name']); }else{ return false; } // Поворачиваем изображение if ($rotate != null){ $src = imagerotate($source, $rotate, 0); }else{ $src = $source; } $w_src = imagesx($src); $h_src = imagesy($src); imagepng($src, $path.$name, $quality, PNG_NO_FILTER); imagedestroy($src); return $file['name']; } // Массив допустимых значений типа файла $types = array('image/jpg', 'image/png', 'image/jpeg'); // Максимальный размер файла 5 Мб $size = 1024*1024*5; if ($_SERVER['REQUEST_METHOD'] == 'POST'){ // Проверяем тип файла if (!in_array($file['picture']['type'], $types)){ $err[7] = 'Запрещённый тип файла.'; } if ($file['picture']['size'] > $size){ $err[8] = 'Максимальный размер файла 5 Мб.'; } $name = resize($file['picture'], $file['picture']['type'],'0'); $tmp_name = $file["picture"]["tmp_name"]; $name = $file["picture"]["name"]; if (!move_uploaded_file( $tmp_name, $path.$name)) { $err[9] = 'Не удалось загрузить картинку'; } Переменная $web загружает в бд путь к картинке $web = $path.$name; $web = str_replace('полный путь к папке ','',$webpath); } if (count($err) != 0) { //Выдает ошибку return $err; } else { //Возвращаем путь return $web; } } } Если выхотите чтобы ваш сайт работал быстро не грузите в БД саму картинку! Проще и удобнее записать путь к загруженной картинке

среда, 18 декабря 2019 г.

Динамическое добавление скрипта в iframe

#javascript #iframe


Есть iframe, генерирующийся динамически. Что в нём - я не знаю, но доступ к нему
через contentWindow есть. Подскажите пожалуйста, как извне добавить туда скрипт так,
чтобы он выполнился первее всех остальных там уже находящихся.

P.S. Чтоб было понятно - скрипт изменяет код функции console.log();

Собственно динамическая генерация iframe:

var frame = document.createElement("iframe");
frame.setAttribute("SRC", [*ссылка на frame*]);
document.body.appendChild(frame);
//далее попытки запихнуть туда свой собственный скрипт

    


Ответы

Ответ 1



Это пример кода показывает когда завершается загрузка вашего iframe. Но если домен в iframe не тот, то доступ к DOM невозможен, и вы все ровно ни как не сможете манипулировать с DOM iframe. Получите ошибку доступа. Подробно о совмесном использовании ресурсов разных источников можете прочитать тут. Обновляю ответ после комментария на ответ: Если доступ к iframe есть то взять элементы DOM iframe можно так. $("#theiframe").contents().find("#simple_elem") Но невозможно сделать так что бы ваш скрипт работал самым первым, потому что скрипты в нем начнут работать как только браузер загрузит их в DOM то есть все ровно они будут работать первым. До добавления вашего скрипта.

Ответ 2



Решение найдено. В сторону установки скриптов в DOM не стоило и копать - дерево недоступно пока полностью не выполнятся другие скрипты. Достаточно сразу после установки iframe выполнить свой код в контексте этого iframe. Вот, как переопределить console.log в iframe: var frame = document.createElement("iframe"); frame.setAttribute("SRC", [*ссылка на frame*]); document.body.appendChild(frame); var bounding = console.log.bind(frame.contentWindow.console); frame.contentWindow.console.log = function(message) { bounding(message); //что-то нужное }

суббота, 6 июля 2019 г.

Как сделать iframe с динамической высотой, задаваемой внутренним содержимым самого фрейма

Добрый день. Как известно iframe кушает лишь четкие указания height в px, а нужно что-бы вставляемый iframe растягивал родительский элемент, в зависимости от размера содержимого самого iframe, т.к. содержимое - динамическое. Кто знает какие решения, простые или сложные (JS, JQ и т.д.)?


Ответ

Скрипт вставлять в тот документ который загружается в iframe, не забудьте также подключить в этот файл jQuery (проверял на 1.6.2) Посмотрите еще вот это - http://host.sonspring.com/iframe/