Posts na categoria ‘iframe’

25jan2012

Alterar dimensões de embed do youtube com javascript

por em HTML, iframe, Javascript, js, youtube
(0) comentários

Repositório, para deixar arquivado aqui.
Veja que ao clicar em cada botão, o tamanho do vídeo se altera.

<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height: 100%; }
</style>
<script type="text/javascript">
function sizeIframe( w, h )
{
	document.getElementById('yt').width = w;
	document.getElementById('yt').height = h;
}
window.onload = function(){
	sizeIframe( document.body.offsetWidth, document.body.offsetHeight-30 );
}
</script>
</head>
<body>
	<iframe width="420" height="315" src="http://www.youtube.com/embed/tvaPMNq4Ey0" frameborder="0" allowfullscreen id="yt"></iframe>

	<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 600, 480 )" />
	<input type="button" name="mudar" value="600x480" onclick="sizeIframe( 420, 315 )" />
	<input type="button" name="mudar" value="300x240" onclick="sizeIframe( 300, 240 )" />
</body>
</html>

É isso. Me diga se vc usar.

Link deste post
Tags:

29dez2011

Pegar <title> de iframe, e jogar no documento pai

por em iframe, Javascript, jQuery
(0) comentários

Dúvida que vi no fórum.

Pegar o valor da tag title de um iframe, e colocar ele em um titulo do lado de fora, do documento pai.
Não é ‘tão simples’ assim, e notei um probleminha: ‘o iframe precisa ser carregado antes de tentarmos pegar o conteúdo dele’.


Bom, resolvi dessa forma:

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#menu a').click(function( e ){

		jQuery('#content').load(function(){
			var titulo = jQuery('#content').contents().find('title').text();
			jQuery('#titulo').text( titulo );
		});
	});
});
</script>
</head>
<body>
	<ul id="menu">
		<li><a href="home.html" target="content">Home</a></li>
		<li><a href="cadastro.html" target="content">Cadastro</a></li>
		<li><a href="contato.html" target="content">Contato</a></li>
	</ul><!-- /menu -->
	<h1 id="titulo">Home</h1>
	<iframe name="content" id="content" src="home.html"  width="99.9%" frameborder="0" scrolling="no" ></iframe>
</body>
</html>

Por esse motivo, depois do clique, eu aguardo o evento ‘onload’ do iframe:

		jQuery('#content').load(function(){

Sse vc não quiser incorporar a lib jQuery, e também para provar que jQuery é apenas javascript, segue a mesma funcionalidade, usando apenas js puro:

function id( el )
{
	return document.getElementById( el );
}
window.onload = function()
{
	id('content').onload = function()
	{
		var titulo = this.contentWindow.document.getElementsByTagName('title')[0].innerHTML;
		id('titulo').innerHTML = titulo;
	};
}

é isso =)
Se for útil, comente e compartilhe. Esse é o único ‘pagamento’ que peço pelos códigos(conhecimento) que disponibilizo.

Link deste post

24jun2011

Rolagem de scroll indo para um iframe – efeito de âncora

por em HTML, iframe, Javascript
(0) comentários

Boas galera!!

Respondendo uma dúvida no iMasters, vi que não é possível usarmos âncoras HTML com iframes(pelo menos eu não consegui) .
O menu tá lá em cima, e o iframe no meio do conteudo, escondido pela rolagem.

isso aqui:

        <a href="http://www.google.com.br/#externo" target="externo" id="google">google</a>

        <iframe src="" name="externo" id="externo" width="1000px"></iframe>

infelizmente não funciona.

Logo, a próxima solução que pensei, foi usar javascript para tal:

<html>
<head>
<script type="text/javascript">
window.onload = function(){
        document.getElementById('google').onclick = function(){

                window.document.body.scrollTop = document.getElementById('externo').offsetTop;

        }
}
</script>
</head>
<body>
        <a href="http://www.google.com.br/" target="externo" id="google">google</a>
        <div id="espaco">
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>

        <iframe src="" name="externo" id="externo" width="1000px"></iframe>
</body>
</html>

=) é isso ai.

Link deste post

27mai2011

Acessar função de um iframe, apatir do documento pai

por em HTML, iframe, Javascript, js
(0) comentários

Operação inversa dessa vez..

para acessarmos uma função do documento pai, de dentro do iframe, o objeto parent, nos ajuda.

Porém e ao contrário ?

Do documento pai, acessar uma function no iframe.

index.html

<input type="text" name="tal" id="tal" value="TalTal" />

<input type="button" name="ok" id="ok" value="Ok" />

<br /><br />
<iframe id="grid" src="grid.html"></iframe>

<script type="text/javascript">
window.onload = function()
{
	var grid = id('grid').contentWindow;
	grid.escreve( id('tal').value );

	id('ok').onclick = function(){
		grid.escreve( id('tal').value );
	}
}
function id( el ){
	return document.getElementById( el );
}
</script>

e o iframe: grid.html

<div id="ae"></div>

<script type="text/javascript">
function escreve( str ){
        document.getElementById('ae').innerHTML = str;
}
</script>

Link deste post

Switch to our mobile site