Question

我已经建立了一个聊天，我希望在特定的网址中将其显示为右下方的弹出窗口。

我使用了标签

// ==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);
    }
};

当我尝试安装它时，没有任何反应。

我不知道如何添加弹出窗口小部件的位置，所以我甚至看不出有什么问题，等等。

Answer 1

设置底部，右侧和位置应使元素可见。

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);
    })();
};

Answer 2

我使用过这个脚本 -

<div class="myClass">Good content --bad content--</div>

[ [“chat”，“http://infinity-guild.esy.es/blab.php”]，

( 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 );

为Violentmonkey创建一个iframe脚本

2 个答案: