Question

我在父窗口中有一个按钮。单击此按钮时，将打开一个新窗口。在子窗口中，有一个名为screenshot的按钮。当我单击屏幕截图按钮时，页面的屏幕截图将显示在新窗口中。

此代码如下：

<script type="text/javascript">
/*var htmldb_delete_message='"DELETE_CONFIRM_MSG"';*/

(function (exports) {
    function urlsToAbsolute(nodeList) {
        if (!nodeList.length) {
            return [];
        }
        var attrName = 'href';
        if (nodeList[0].__proto__ === HTMLImageElement.prototype
        || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
            attrName = 'src';
        }
        nodeList = [].map.call(nodeList, function (el, i) {
            var attr = el.getAttribute(attrName);
            if (!attr) {
                return;
            }
            var absURL = /^(https?|data):/i.test(attr);
            if (absURL) {
                return el;
            } else {
                return el;
            }
        });
        return nodeList;
    }

    function screenshotPage() {
        urlsToAbsolute(document.images);
        urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
        var screenshot = document.documentElement.cloneNode(true);
        var b = document.createElement('base');
        b.href = document.location.protocol + '//' + location.host;
        var head = screenshot.querySelector('head');
        head.insertBefore(b, head.firstChild);
        screenshot.style.pointerEvents = 'none';
        screenshot.style.overflow = 'hidden';
        screenshot.style.webkitUserSelect = 'none';
        screenshot.style.mozUserSelect = 'none';
        screenshot.style.msUserSelect = 'none';
        screenshot.style.oUserSelect = 'none';
        screenshot.style.userSelect = 'none';
        screenshot.dataset.scrollX = window.scrollX;
        screenshot.dataset.scrollY = window.scrollY;
        var script = document.createElement('script');
        script.textContent = '(' + addOnPageLoad_.toString() + ')();';

        screenshot.querySelector('body').appendChild(script);
        var blob = new Blob([screenshot.outerHTML], {
            type: 'text/html'
        });   
        return blob;
    }

    function addOnPageLoad_() {
        window.addEventListener('DOMContentLoaded', function (e) {
            var scrollX = document.documentElement.dataset.scrollX || 0;
            var scrollY = document.documentElement.dataset.scrollY || 0;
            window.scrollTo(scrollX, scrollY);
        });
    } 

    function generate() {
        window.URL = window.URL || window.webkitURL;
        window.open(window.URL.createObjectURL(screenshotPage()));
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(screenshotPage());
        document.querySelector("#image").src = imageUrl;
    }
    exports.screenshotPage = screenshotPage;
        exports.generate = generate; 




})(window);


 /*------------------popup windows----------------*/


    function openWin() {

        var myBtn = document.getElementById("myBtn");

        myBtn = window.open('', '', 'width=400,height=300');
        myBtn.document.write("<p>This Popup Windows only for Take a Screen Short</p>");
        myBtn.document.write("<p></p>");
        myBtn.document.write("<p></p>");



        // Add a button element here
        myBtn.document.write('<button onclick="window.opener.generate();">Screen Short</button>');

        myBtn.focus();

        function gotoreserve() {
            window.location.href = "http://10.11.201.170:7777/emobdev/";
        }
    }



</script>
<body>
<button id ="myBtn" onclick="openWin()" >Click me </button >
<img id="image"/>
</body>

我想修改代码，以便捕获的屏幕截图应显示在屏幕截图按钮下方的子窗口中。我怎样才能做到这一点？

如何在javascript中在子窗口中显示图像

0 个答案: