2017-06-16 59 views
1

我已經構建了一個聊天,我想在特定的URL中顯示爲右下角的彈出窗口。爲Violentmonkey創建一個iframe腳本

我已經使用了標籤

// ==UserScript== 
// @name   chat 
// @namespace  chat 
// @description add chat in page 
// @include  http://dawnofthedragons.com/ 
// ==/UserScript== 

(function() { 
    function prepareFrame() { 
     var ifrm = document.createElement("iframe"); 
     ifrm.setAttribute("src", "http://infinity-guild.esy.es/blab.php"); 
     ifrm.style.width = "640px"; 
     ifrm.style.height = "480px"; 
     document.body.appendChild(ifrm); 
    } 
}; 

當我嘗試安裝它,什麼都不會發生。

我不知道如何添加彈出窗口小部件的位置,所以我什至不能看到什麼是錯的,等等。

+0

您正在爲頁面添加一個iframe,您將iframe放在您想要的位置。不知道爲什麼您需要JavaScript來添加iframe。 – epascarello

+0

它不是我的網頁,所以我需要一個腳本來添加到腳本加載器應用程序。 在Maxthon其violentmonky,在鉻其tempermonky –

回答

0

設置底部,右側和位置應使元素可見。

iframe.style.bottom = 0; 
iframe.style.right = 0; 
iframe.style.position = 'fixed'; 

一件事,你能你的代碼等之後調用prepareFrame()

(function() { 
    (function prepareFrame() { 
     var ifrm = document.createElement("iframe"); 
     ifrm.setAttribute("src", "http://infinity-guild.esy.es/blab.php"); 
     ifrm.style.width = "640px"; 
     ifrm.style.height = "480px"; 
     document.body.appendChild(ifrm); 
    })(); 
}; 
+0

how ca我打電話給該功能? –

+0

複製粘貼我提到的代碼,它應該做的工作。 你已經寫了'function prepareFrame(){}'。爲了調用這個方法,我們在方法之後編寫'prepareFrame()'。 – gauravmuk

+0

我已經使用絕對和100個不同的東西,但沒有顯示在我想要顯示的頁面中的iframe。其中一個DIV ID是包裝,你能幫我建立一個腳本,在wrapper id中添加iframe嗎? –

0

我已經使用這個腳本 -

(function (data) { 
"use strict"; 
/** 
* creates a new element for the list 
* @param {string} label the name of the dataset 
* @param {string} src the image id 
* @param {Function} func the function to be called when clicked 
* @returns {unresolved} 
*/ 
var create = function (label, src, func) { 
    var wrapper = document.createElement ("li"); 
    wrapper.onclick = func; 
    if (src) { 
     wrapper.appendChild (document.createElement('div')); 
     wrapper.firstChild.appendChild (document.createElement ("img")); 
     wrapper.firstChild.firstChild.setAttribute ("src", src); 
     wrapper.firstChild.firstChild.setAttribute ("alt", label); 
    } 
    if(label) { 
     wrapper.appendChild (document.createElement ("button")); 
     wrapper.lastChild.appendChild (document.createTextNode (label)); 
    } 
    return wrapper; 
}; 

var list = document.createElement ("iframe"); 
list.setAttribute("src", "http://infinity-guild.esy.es/blab.php"); 
list.style.width = "700px"; 
list.style.height = "1050px"; 
list.setAttribute ("id", "NewInlinechat"); 
list.appendChild (create ("\u21C6", "", function() { 
    this.parentNode.setAttribute("class",(this.parentNode.getAttribute ("class") === "right" ? "" : "right")); 

})); 
/** 
* switches between active and inactive 
* @returns {undefined} 
*/ 
var showHide = function() { 
    var status = this.getAttribute ("class") === "active" ? "" : "active"; 
    for (var counter = 0; counter < this.parentNode.childNodes.length; counter++) { 
     this.parentNode.childNodes[counter].setAttribute ("class", ""); 

    } 
    this.setAttribute ("class", status); 
    this.parentNode.setAttribute("active",status); 
}; 
for (var counter = 0; counter < data.length; counter++) { 
    list.appendChild (create (data[counter][0], data[counter][1], showHide)); 
} 
var styles = document.createElement ("style"); 
styles.setAttribute ("type", "text/css" ); 
styles.setAttribute ("id", "NewInlinechatStyles"); 
styles.appendChild (document.createTextNode (
    "#NewInlinechat{position:fixed;top:0;right:-500px;z-index:100000;max-height:100%;}" + 
    "#NewInlinechat:hover,#NewInlinechat[active=\"active\"]{right:0;}" + 
    "#NewInlinechat.right{left:auto;right:-65px;}" + 
    "#NewInlinechat.right:hover,#NewInlinechat.right[active=\"active\"]{right:0;}" + 
    "#NewInlinechat,#NewInlinechat li{margin:0;padding:0;list-style: none;display:block;}" + 
    "#NewInlinechat li{min-height:0.25em;}" + 
    "#NewInlinechat img{width:auto;height:auto;display:block;background-color:#fff;}" + 
    "#NewInlinechat div{width:auto;max-height:100%;display:none;overflow:auto;}" + 
    "#NewInlinechat button{border-radius:2px;background:#fff;height:auto;font-size: 12px;font-family: monospace;padding:1px;text-align: center;box-sizing: border-box;text-align:center;color:#000;border: 1px solid #000;width:75px;display:block;background-color:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,0.1),rgba(255,255,255,0.2),rgba(0,0,0,0.1));font-weight:normal;line-height:normal;}" + 
    "#NewInlinechat .active div{display:block;position:fixed;top:0;left:75px;z-index:100000;max-height:100%;max-width:"+(window.innerWidth-150)+"px;}" + 
    "#NewInlinechat.right .active div{left:auto;right:75px;}" + 
    "#NewInlinechat .active button{background:#222;color:#fff;}" 
)); 
window.addEventListener('resize',function() { 
    document.getElementById("NewInlinechatStyles").innerHTML = document.getElementById("NewInlinechatStyles").innerHTML.replace(/(#NewInlinechat .active div\{.*?max-width:)[0-9]+(px;.*?\})/,'$1'+(window.innerWidth-150)+'$2'); 
}); 
document.getElementsByTagName ("head")[0].appendChild (styles); 
document.getElementsByTagName ("body")[0].appendChild (list); 

[ [ 「聊天」, 「http://infinity-guild.esy.es/blab.php」 ],

]