Вставка HTML-страницы в другую HTML страницу
Добрый день форумляне, подскажите пожалуйста, есть ли способ вместить в страницу содержание другой страницы, причем вторая страница должна быть уменьшена в масштабе без изменения содержимого.
Имеется html страница с картой, мне нужно уменьшить ее размер и поместить в центр другой страницы. По средствам чего можно это выполнить c iframe не получается, она просто не влазит в iframe, появляются скролы, неужели нет способа играть с размерами html страницы.:help: |
zoom: N; /* для IE */ transform: scale(...); /* для остальных */ |
Спасибо большое, только мне нужно уменьшить страницу, а transform: scale(...) - только увеличивает.
как уменьшить страницу, какой параметр использовать???? HELP!!! |
Цитата:
|
transform: scale(0.5); // уменьшит в два раза |
К сожалению Раед, Вы неправы, каждая цифра это полная ширина или высота объекта:
1 – размер не изменится; 1.5 – размер увеличится в полтора раза по ширине или высоте; 2 – размер увеличится в два раза по ширине или высоте; 3- размер увеличится в три раза по ширине или высоте; Так что transform: scale(...) - не подходит |
это параметр для css применяемой для div, тогда подскажите как мне вставить страницу в div.
|
devote, не получается
вот этот класс для div описанный в css .wrapper { position:relative; -o-transform: scale(0.5) } не уменьшает P.S. Какой параметр указать, для того что бы в div загрузить html-страницу????? |
<style>
body{
-o-transform:scale(0.5);
-webkit-transform: scale(0.5);
-moz-transform:scale(0.5);
-ms-transform:scale(0.5);
transform::scale(0.5);
}
</style>
|
Цитата:
Введите в консоль document.body.style.OTransform = 'scale(0.4, 0.1)' |
Цитата:
жаль, что zoom изменяет размер не векторно, а расторно. есть ли способ с помощью фильтров изменить размер векторным образом? </оффтопик> |
я тут http://webandad.com/ использовал zoom и scale вроде нормально, единственное проблема в ИЕ, то что zoom размер меняет к центру а scale к левому-верхнему углу. Или наоборот, точно не помню уже
|
devote, у него и с фильтром поворота тоже беда - он по-другому поворачивает*. поэтому поворот "как во всех браузерах" можно сделать только тогда, когда есть под рукой элемент, а не CSSStyleDeclaration :(. и это печально.
*величина "кривизны" зависит от размеров элемента PS. что-то я вспомнил про expressions... хм, может, еще получится сделать нормальный поворот, не имея на руках элемент. |
Цитата:
Работает во всех браузерах кроме ИЕ8
<style type="text/css">
#to_rotate {
position: absolute;
width: 100px;
height: 100px;
background-color: #f00;
filter:expression("progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+(this.style.Rotate?1:(this.style.Rotate=0),(this.xWidth?1:(this.xWidth=this.offsetWidth,this.xHeight=this.offsetHeight,1)),(this.style.marginLeft=(-Math.round((this.offsetWidth-this.xWidth)/2))+"px"),(this.style.marginTop=(-Math.round((this.offsetHeight-this.xHeight)/2))+"px"),Math.cos((this.style.Rotate*Math.PI)/180.0))+",M12="+(-(Math.sin((this.style.Rotate*Math.PI)/180.0)))+",M21="+(Math.sin((this.style.Rotate*Math.PI)/180.0))+",M22="+(Math.cos((this.style.Rotate*Math.PI)/180.0))+")");
}
</style>
<div style="position: relative;">
<div id="to_rotate">test text</div>
</div>
<script type="text/javascript">
setInterval(function() {
var el = document.getElementById('to_rotate');
// специальное свойство для IE ниже восьмой версии
el.style.Rotate = (el.style.Rotate||0) + 2;
// для все остальных
el.style.OTransform =
el.style.MozTransform =
el.style.WebkitTransform =
el.style.msTransform =
el.style.transform = "rotate(" + el.style.Rotate + "deg)";
}, 50);
</script>
|
если кому то нужно кросс-браузерный rotate с помощью скриптов, то вот:
<style type="text/css">
#to_rotate {
position: relative;
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div id="to_rotate">test text</div>
<script type="text/javascript">
function rotateElem( elem, deg ) {
var style = elem.style;
if ( elem.ownerDocument && elem.ownerDocument.defaultView ) {
style = elem.ownerDocument.defaultView.getComputedStyle( elem, null );
} else if ( elem.currentStyle ) {
style = elem.currentStyle;
}
if ( eval("/*@cc_on @_jscript_version;@*/") <= 5.8 ) {
var rad = ( deg * Math.PI ) / 180.0,
cos = Math.cos(rad),
sin = Math.sin(rad);
elem.originalWidth = elem.originalWidth || elem.offsetWidth;
elem.originalHeight = elem.originalHeight || elem.offsetHeight;
elem.style.filter = style.filter.replace( /progid:DXImageTransform.Microsoft.Matrix\([^)]*\)[;]?/g, "" ) +
"progid:DXImageTransform.Microsoft.Matrix("+
"sizingMethod='auto expand',M11="+cos+",M12="+(-sin)+",M21="+sin+",M22="+cos+")";
elem.style.marginLeft = -Math.round( ( elem.offsetWidth - elem.originalWidth ) / 2 );
elem.style.marginTop =- Math.round( ( elem.offsetHeight - elem.originalHeight ) / 2 );
} else {
var Transform = (
style.transform ||
style.OTransform ||
style.MozTransform ||
style.WebkitTransform ||
style.msTransform
)+"";
elem.style.OTransform =
elem.style.MozTransform =
elem.style.WebkitTransform =
elem.style.msTransform =
elem.style.transform =
Transform.replace( /(none|[\s]?(rotate|matrix)\([^)]*\))/g, "" ) + " rotate(" + deg + "deg)";
}
}
setInterval((function(){
var start = 0;
return function() {
rotateElem( document.getElementById('to_rotate'), start+=2 );
}
})(), 50);
</script>
работает во всех браузерах. |
Цитата:
тогда.. придется только для него получать список элементов (слава Богу, он поддерживает querySelectorAll - кстати, не без глюков?). получается объёмненько, если так ветвиться - три раза. но это уже лучше, чем ничего :) |
Цитата:
|
Deff, спасибо,страница уменьшилась : )
А можно задать какой то определенный размер страницы в % или px???? Теперь объясните пожалуйста как вставить эту страницу в DIV??? Если источником будет являться страница с php, в которую я буду вставлять свою html-страницу, то что изменится??? Если можно то привидите пожалуйста пример способа реализации. Очень благодарен за ответы.:) |
Цитата:
|
Раед, да, но только когда я вставляю страницу уменьшенную в iframe, то размер опять становиться прежним : (
|
hadzhimuratov,
Возможно тут нужно применять transform к Iframe (скорей всего по событию onload) или css |
а можешь на примере показать, буду очень признателен.
|
hadzhimuratov,
<style>
body iframe{
-o-transform:scale(0.5);
-webkit-transform: scale(0.5);
-moz-transform:scale(0.5);
-ms-transform:scale(0.5);
transform::scale(0.5);
}
</style>
Вот исходный http://hostjs-mybb2011.narod.ru/Chess.htm *Шахматы Вот уменьшенный => http://hostjs-mybb2011.narod.ru/ChessTransf.htm |
Deff, очень признателен, но я вот тут почитал http://futtta.be/squeezeFrame/, с помощью js делает умелец.
В продолжении, Deff, можешь подсказать как мне js подцепить к php???? P.S. Так у меня и не получается подогнать страницу под iframe(((( |
Цитата:
|
Уважаемый Deff,
На странице которую я хочу подогнать под iframe у меня карта из кусков, мне нужно уменьшить эту страницу в iframe, этого у меня не получается сделать, а без уменьшения передвигая, всеравно не влазиет((( |
hadzhimuratov,
Вы ссылки с примерами смотрели ? Шахматы ? Шахматы стоят фреймом с ресурса к которому я доступ не имею Вот уменьшенный с поправленным смещением http://hostjs-mybb2011.narod.ru/ChessTransf2.htm |
я что то не так делаю??
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>primer</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <style> body iframe{ -o-transform:scale(0.5); -webkit-transform: scale(0.5); -moz-transform:scale(0.5); -ms-transform:scale(0.5); transform::scale(0.5); } </style> <body> <div><iframe SRC="index.html"></iframe></div> </body> |
hadzhimuratov,
Не заданы размеры фрейма Они должны быть сначало для полноразмерной страницы, А затем мы поправим http://htmlbook.ru/html/iframe |
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>primer</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <style> body iframe{ -o-transform:scale(0.5); -webkit-transform: scale(0.5); -moz-transform:scale(0.5); -ms-transform:scale(0.5); transform::scale(0.5); } </style> <body> <div><iframe SRC="index.html" width="604" height="367"></iframe></div> </body> </html> Размер страницы с кусками карты 1200 на 820. |
Цитата:
|
Страницы не опубликованы.
Вот здесь сама по себе страница уменьшается. Цитата:
Цитата:
|
hadzhimuratov,
Мне нужна реальная ссылка хотя бы на карту, можно в личку - иначе трудно сообразить...да и привык ужо так |
hadzhimuratov,
Ну итоговый код получился таков:
<html>
<head>
<style>
#Wrapper1 iframe{
margin-left:-290px;
margin-top: 40px;
-o-transform:scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);
}
#Wrapper1{
height:367px;
width:604px;
overflow:hidden;
border:red solid 1px;
}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<body>
<div id="Wrapper1"><iframe width="1280" height="840" SRC="lesson_files/index000.htm" seamless></iframe><div>
</body>
</html>
Отправил Демо в Личку: |
Огромнейшее спасибо, но вот беда с IE, нужно походу описание делать с эмуляцией <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> .
|
hadzhimuratov,
Вопрос такой - исходная страница с картой без фрейма - в ИЕ отражается без проблем ? |
Deff,Выскакивает окошко, разрешить заблокированное, после чего отображается в исходном размере, не уменьшенном.
|
Извините, в мини-отпуске был.
|
Нашел инфу о том что нельзя играть с размерами ифрэйма. НоDeff,
смог меня переубедить в этом, но как сделать так что бы в ИЕ отображалась уменьшенная страница как и в FF, Opera и Chrome |
hadzhimuratov,
В IE не сделать, поскольку нет свойств сss и проще править скрипт на странице фрейма, посколь карта задана картинками, вот они ужимаются (наверно, если они идут не как фоновые, но проще имхо - перевоять скрипт карты, чем мучицо с чужими шедеврами, фреймо вставками и отсутствием кроссбраузерности |
| Часовой пояс GMT +3, время: 13:27. |