iframe

Usando falso iFrame

Novamente, hoje irei postar um tutorial que foi pedido através do formulários de sugestões. O tutorial ensina como fazer um “falso iFrame”.

A primeira coisa a fazer antes de começar o tutorial (por favor, não se esqueçam de fazer isso, pois depois não poderão reclamar que seus posts sumiram…): Guarde uma cópia do código do seu theme no seu computador.

Depois de salvar a cópia, você precisará descobrir qual o ID da DIV que delimita seus posts. Esta ID pode variar bastante de theme para theme, mas tem uma “dica” que pode te ajudar a descobrir:

Procure por {block:Posts} no seu theme, logo acima dele, deverá haver uma tag desta forma (não se esqueça que “{block:Posts}” pode aparecer várias vezes no theme, você tem que perceber quando é o certo): <div id=“NOME DA ID”>

Pronto, copie este nome da ID (guarde-o nom bloco de notas em algum outro lugar para não esquecer). Agora você precisará substituir o texto em negrito abaixo pelo NOME DA ID e colar o código antes de </head>:

<script type="text/javascript">
function changeNavigation(id) {document.getElementById('NOME DA ID').innerHTML=document.getElementById(id).innerHTML}
</script>

Agora, procure a parte do código onde você quer que apareça o menu para alternar entre os iFrames falsos, e cole isso:

<span onClick="changeNavigation('01')">Nome do link</span>
<span onClick="changeNavigation('02')">Nome do link</span>
<span onClick="changeNavigation('03')">Nome do link</span>


Obs.: O menu não se restringe a apenas 3 itens, para criar mais, basta copiar alguma das linhas do menu, aumentando apenas o número (por exemplo, para criar mais um, você deve por um com o número 04).

Agora cole isso antes de </body>:

<div id="01" style="display:none">
Conteúdo do iFrame 1
</div>

<div id="02" style="display:none">
Conteúdo do iFrame 2
</div>

<div id="03" style="display:none">
Conteúdo do iFrame 3
</div>


Obs.: Se você criou mais um item no menu, não se esqueça de criar mais um iFrame, para isso, basta copiar algum dos itens da lista de conteúdos e susbtituir o número (pelo mesmo número que está no menu).

Depois é só salvar =)

Este tutorial foi baseado em um tutorial deste Tumblr: She was Lo <33

E sugerido por este Tumblr: Chuva de Amor

Resizing multiple iFrames in a page

not a big fan of iframe..really..

don’t even know why I’m using iframes right now..can’t think of better way..

current take:

get window size, reduce it to 80%, setInterval 

in my crappy code:

$(document).ready( function() {

    setInterval(setIframeSize, 5);

});

function setIframeSize() {

    $(‘iframe’).height($(window).height()*.8);

}

swear I will remove iframes later on with all ajaxed single page

How to change start time of YouTube videos using iframe embed codes

In order to set a new start time for the video you first need to calculate the point in time that you would like the video to start. Unfortunately, unlike the URL example that allows you to set minutes and seconds this method uses seconds only. Therefore to make this embedded version of our example video start at 3 minutes 05 seconds we would need to set the time to 185 seconds. To add this start time to the code you need to delete anything that comes after the “?” of the video code, in this case “rel=0”.I have underlined the areas that you need to remove in the above line of code. To set the new start point of your video you need to replace this vacant space with “start=TIME” which in this case is 185. Therefore the code I have added to this example is “start=185” as shown in italic and bold in the code below:

<iframe width=“560” height=“349” src=“http://www.youtube.com/embed/BogitQpXh8A?start=185 frameborder=“0” allowfullscreen ></iframe>

transparency in iframe and how to edit it

the path must be relative and in the same domain

<iframe src=“login.php” width=“464” height=“291” allowtransparency=“true” frameborder=“0” id=“iframe_login”></iframe>

<script>
var myFrame = $(’#iframe_login’);
myFrame.load(function(){
myFrame.css({“position”:“absolute”,“overflow”:“hidden”,“left”:“120px”})
        .contents().find(‘body’).css(“background”,“none”)
                                 .find(“.box”).css(“width”,“auto”)
                                 .find(“.box_top”).remove()
                                 .end().find(“#landing_call_to_action”).css(“margin”,“0”);
});
</script>

Breakaway Bolt | Fate of Arun: Go Berserk

Hello i’ve been experimenting in some dungeons ever since a guildie mentioned something about our new iframe Breakaway Bolt:

Block all damage while shooting an explosive arrow that damages targets within 4m, and leaping backward.

Saying that by using this skill you take no damage, reminded me that it might be a different type of iframe than backstep is. so i tested it out in various dungeons and here are the results.



The first video clip i have here is me fighting Nightmare Tempus, the 2nd boss in Timescape hard mode (tshm). usually, the dps are not able to iframe the storm jump (when he says “Fools! I am the storm incarnate!”), which inevitably gives everyone a mana-draining debuff. some classes are able to iframe this, such as reapers with retribution and gunners with recall (i think). assuming that the new iframe Breakaway Bolt is a similar iframe, i’ve decided to test how it would do if i use the specific skill to iframe this jump:

Please excuse the kpop hue

As you can see in the video, i was able to iframe the mana-drain debuff contrast to other classes.

More evidence is here: evidence 2 & evidence 3 (kpop included hue)

This was also useful for the final boss in tshm, Nightmare Yana. i noticed that backstep wasn’t able to dodge the damage that Yana’s shockwave attack does. Once again, considering the new skill tool tip, BB was tested as well:

Excuse the damage- was a tankless final boss haha;

It worked for NIghtmare Yana’s shockwave attack as well! (hurray). unfortunately, it does not work for mid-ring and archers cannot solo it.

Adding on to this, I was always jealous of reapers, gunners, and sorcerers only in ainm being able to iframe Duras’ lava flow (of course, reapers and gunners are able to iframe in hard mode as well). i decided to test this as well in there as well and as expected, the results were gold:

Second evidence for ainm here.

The dps were mostly classes that were able to iframe as well, and prepared players were able to get to vents as well, but for the few remaining on grounds, they took the debuff, while i with BB did not.

Coming soon: aihm evidence (i was able to confirm for myself in a run but… that moment you think you are recording but you’re not *rip*)

tl;dr

Therefore, BB is definitely a different type of iframe than backstep, and because of this we can iframe tempus’ storm jump, nightmare yana’s shockwave, and duras’ lava flow :3

Shadowbox, Fancybox o altribox non caricano più Google Maps!?

 

A seguito di un aggiornamento di Google Maps potrebbe capitare che la visualizzazione delle mappe all'interno dei popup box jquery produca l'errore:

Refused to display document because display forbidden by X-Frame-Options

È capitato in alcuni dei nostri siti web che utilizzano le librerie Fancybox e Shadowbox.

Per fare in modo che la mappa si carichi correttamente è sufficiente aggiungere &amp;output=embed all'interno dell'attributo href. Ad esempio:

<iframe width="425" height="350" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0"
src="http://www.google.it/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=studioaqua&amp;aq=&amp;sll=41.442726,12.392578&amp;sspn=29.566089,39.770508&amp;vpsrc=0&amp;ie=UTF8&amp;hq=studioaqua&amp;hnear=&amp;t=m&amp;ll=45.677059,11.9264&amp;spn=0.071946,0.071946&amp;output=embed"></iframe><br /><small><a href="http://www.google.it/maps?f=q&amp;source=embed&amp;hl=it&amp;geocode=&amp;q=studioaqua&amp;aq=&amp;sll=41.442726,12.392578&amp;sspn=29.566089,39.770508&amp;vpsrc=0&amp;ie=UTF8&amp;hq=studioaqua&amp;hnear=&amp;t=m&amp;ll=45.677059,11.9264&amp;spn=0.071946,0.071946" style="color:#0000FF;text-align:left&amp;output=embed">
Visualizzazione ingrandita della mappa</a></small>
Falso IFrame na sidebar

Para fazer falso iframe na sidebar é bem fácil, para quem não sabe o que é entre no meu tumblr pessoal !

Bom vamos lá , primeiro cole o código abaixo, antes de </style>

/*** MENU ***/

un {font-family: verdana; letter-spacing: 1px; font-size: 11px; line-height: 13px; display: inline-block; background: #696969; color:#fff; 
width: 28%;  float: left; padding: 5px; margin: 1px; text-align: center; text-transform: uppercase; 

 text-shadow: 2px 2px 3px #eee;}


un:hover {font-family: verdana; letter-spacing: 2px; font-size: 11px; line-height: 13px; display: inline-block; background:#000; color:#fff;
 width: 28%; float: left; padding: 5px; margin: 1px; text-align: center; text-transform: uppercase; }

/*** CAIXA DA SIDEBAR ***/
.caixasidebar {position: absoluted; width:350px; z-index:2; left: 40px; top: 230px; overflow-x: hidden; overflow-y: hidden; font-style: tahoma; 
font-size: 11px; color: #000; text-align:justify; background-color: #FFF; padding:6px; text-shadow: 0 1px 1px #eee ; color:#000;
 line-height: 17px; border: 1px solid #696969;  box-shadow: 0 0 3em #eee;}

Agora cole o código aonde você quer que apareça a sidebar
<div style="position:fixed; width:350px; left: 10px; top:80px; padding-top:0px; z-index:2;">
<div id="main">
<div class="caixasidebar">

Coloque um texto ou uma frase , ou o que você goste , fique a vontade :)

</div></div></div>

Agora coloque este código aonde quer que o menu apareça

<span onClick="document.getElementById('main').innerHTML=

document.getElementById('01').innerHTML" title="NOME"><un>NOME</un></span>

Agora coloque este código antes de </body>

<div id="01" style="display:none"><div class="caixasidebar">


CONTEÚDO AQUI


</div></div></div></div></div></div>

OBS Pode adicionar quantos menus quiser , mude o 01 para 02, 03 e etc ..

Se lhe for útil credite !

Lista rápida de como consertar o iframe, (dependendo da situação):

Se os posts aparecem depois do conteúdo do iframe:

Pode ser que a div esteja mal definida. Para isso coloque um <div id=“mtpost”> antes de {block:Posts} e uma </div> depois de {block:Posts}, trocando o liuc, posts ou content do código de iframe por mtpost.

Se o iframe não vai de um pro outro:

Verifique se não há uma </div> faltando no final do conteúdo de cada aba. Se isso não resolver, experimente colocar o conteúdo do iframe depois de <body>.

Se o conteúdo do iframe aparece no theme, no fundo de tudo.

Verifique se no código do conteúdo, há algo assim:

style=“display:none”

Se não houver, acrescente o item acima, depois da id do conteúdo (<div id=“01” …>).

Se quando clica no iframe, o conteúdo não aparece, ou aparece fora do lugar.

Veja se a id que está ali, no código do iframe é a id dos seus posts. (ex: content, liuc, posts…) Se não, procure por {block:Posts} e veja o que tem antes dele, e substitua por essa id.

Essa é uma lista de soluções rápidas, com os problemas mais frequentes no iframe. Se o seu iframe estiver com outro tipo de problema, nos avise e nós acrescentamos a lista.

{Ca}

クロスドメインでiframeの高さを自動調節するjavascript

年末から異なるドメイン間でiframeの入れ子になってる方の高さを自動調節する方法を考えていました。

<参考>

  1. クロスドメインでiframeの高さを自動調節する方法
  2. iframeの高さをコンテンツにあわせる
  3. window.postMessage() を使って、クロスドメインの iframe の高さを設定する検証

1の文章中に、"クロスドメインでの確認はしていませんが、恐らく大丈夫じゃないかと思います。(駄目だったらごめんなさい。)"なんて書いてあるので期待したら、

https://github.com/house9/jquery-iframe-auto-height

SummaryにWill NOT work if the iframe contains a page from another domainって書いてあります。今後対応しそうですが、jQuery iframe auto height pluginはクロスドメインには非対応です。

結果的に3で解決。ただし、window.postMessage()は同一プロトコル上で安全にクロスドメイン通信を可能にするためのメソッドなので、http→https(SSl)等は動作しません。

http://mohumohu/parent.html
http://hogehoge.com/iframe.html

上記のようにmohumohuとhogehogeという別ドメインにファイルが置かれている状態で、parent.htmlにiframe.htmlを表示させたい場合、

parent.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
    window.addEventListener("message", receiveSize, false);
    function receiveSize(e) {
        if (e.origin === "http://hogehoge.com") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
            document.getElementById("bar").style.height = e.data + "px";
    }
</script>
</head>
<body>
    <iframe id="bar" src="http://hogehoge.com/iframe.html" scrolling="no" >
    </iframe>
</body>
</html>

iframe.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
    window.addEventListener("load", postSize, false);
    function postSize(e){
        var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
        if (typeof target != "undefined" && document.body.scrollHeight)
            target.postMessage(document.getElementById("foo").scrollHeight, "*");
    }

</script>
</head>
<body>

これでできました。読み込む方も iframeを表示させる親の方もPHPでもhtmlでも大丈夫です。

Make an iFrame Resize

Every wanted to make an iFrame dynamically resize?

<script type=”text/javascript”>
<!—
moz=document.getElementById&&!document.all
mozHeightOffset=20 

function resize_iframe(){
document.getElementById(“sizeframe”).height=100 // required for Moz bug, value can be “”, null, or integer
document.getElementById(‘iframe_id’).height=window.frames[“iframe_name”].document.body.scrollHeight+(moz?mozHeightOffset:0)
}
// —>
</script>

<iframe width=300 id=”sizeframe” name=”sizeframe” src=”” scrolling=”no” frameborder=”yes” onload=resize_iframe()></iframe>

External image