HTMLブロックの任意操作

下にあるテキストボックスに値を入れてボタンを押すとその下にある（初期表示ではHeightが0なので見えない）htmlブロックの大きさを操作できる。
Wikidotでユーザー任意のiframe調整を行う方法。

htmlブロック操作基盤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Remort Htmlblock Controler</title>
<script type="text/javascript">
var brother;
var url;
document.addEventListener("DOMContentLoaded",function(){
window.addEventListener("message",function(event){
if(event.data == "request"){return;}
if(url){return;}
url = event.data;
controlStart.style.display = "block";
 
});
brother = window.parent.window.frames;
setA();
});
 
function setA(){
for(var i = 0;i < brother.length;i++){
brother[i].window.postMessage("request","*" );
}
if(!url){
setTimeout(setA,10);
}
}
 
function setEnd(){
for(var i = 0;i < brother.length;i++){
brother[i].window.postMessage("end","*" );
}
}
 
function createControlDiv(){
if(!url){return;}
var children = iframeSet.children;
while(iframeSet.children.length > 0){
iframeSet.removeChild(iframeSet.firstChild); 
}
    var url_array = url.split('/');
var resize_iframe_id = 'iframe_' + iframe_hash +8;
    var iframe_hash = url_array[5];
var resize_url = url_array[0] + '//' + url_array[6] + '/common--javascript/resize-iframe.html';
        var iframe = document.createElement("iframe");
        iframe.id = resize_iframe_id;
        iframe.src = resize_url + "?" + Math.random() + "#" + setWidth.value + "/" + iframe_hash;
iframe.style.display = "none";
iframeSet.appendChild(iframe);
}
</script>
</head>
<body>
<input id="setWidth" type="text" style="100%;display:block;"></input>
<button id="controlStart" style="display:none;" onclick="createControlDiv()">遠隔リサイズ</button>
<div id="createURL"></div>
<div id="iframeSet"></div>
 
</body>
</html>

htmlブロックの中身

[[html]]
<script type="text/javascript">
var brother;
document.addEventListener("DOMContentLoaded",function(){
brother = window.parent.window.frames;
var search = 0;
window.addEventListener("message",function(event){
if(event.data == "request" && search<2){
if(search==0){search=1;}
sendMyURL();
}
if(event.data == "end" && search==1){
search=2;
}
});
brother = window.parent.window.frames;
});
 
function sendMyURL(){
for(var i = 0;i < brother.length;i++){
brother[i].window.postMessage(location.href,"*" );
}
 
}
</script>
<style>
body{
background-color: #AFB !important;
}
</style>
<div style="position:absolute;;top:0;left:0;">
PositionをAbsoluteにして、コンテンツの内容によって、documentのheightの値が変わるのを防ぐ。後、この場合documentの大きさが変わっていないので、Wikidotに正規に備わっているスクリプトは発動しない（検証機能を使うとhtmlブロック調整用のiframeが作られていない事がわかる）。
</div>
[[/html]]

Codeブロックコンテンツの遠隔操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Remort Htmlblock Controler</title>
<script type="text/javascript">
var brother;
var url;
 
function createControlDiv(){
var children = iframeSet.children;
while(iframeSet.children.length > 0){
iframeSet.removeChild(iframeSet.firstChild); 
}
 
        var iframe = document.createElement("iframe");
        iframe.src = "http://shitake-crude-production.wikidot.com/common--javascript/resize-iframe.html" + "?" +"KokoNandemoE-"+ "#" + setWidth.value + "/" + "4";
createURL.innerHTML = iframe.src;
iframe.style.display = "none";
iframeSet.appendChild(iframe);
}
</script>
</head>
<body>
<input id="setWidth" type="text" style="100%;display:block;"></input>
<button id="controlStart" onclick="createControlDiv()">遠隔リサイズ(codeブロックに納めたもの)</button>
<div id="createURL"></div>
<div id="iframeSet"></div>
 
</body>
</html>

テスト<br />
このcodeブロックで作られたURLは<br />
http://shitake-crude-production.wikidot.com/lab:remort-htmlblock-controler/code/4<br />
iframeへの収め方は<br />
[[embed]]<br />
&lt;iframe class=&quot;html-block-iframe&quot; src=&quot;/lab:remort-htmlblock-controler/code/4"&gt;&lt;/iframe&gt&quot;<br />
[[/embed]]

page revision: 36, last edited: 10 Apr 2018 14:20

Edit Rate (0) Tags History Files Print Site tools + Options

椎茸天然製造

Shitake Crude Production

HTMLブロックの任意操作

Codeブロックコンテンツの遠隔操作