将内容添加到新打开的窗口

IT技术 javascript jquery html
2021-01-13 02:57:42

我不知道如何解决这个问题,我试过阅读很多帖子,但没有一个答案。

我需要打开一个带有已编码页面的新窗口(在同一域内)并添加一些内容。

问题是,如果我使用OpenWindow.write()的页面尚未加载,或者它会覆盖所有内容,并且只会出现通过写入添加的代码。

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
OpenWindow.document.write(output);

output 是我需要附加的代码。

我需要它至少在 Firefox、IE 和 GC 上工作。

提前致谢。如果我需要使用 JQuery,这不是问题。

5个回答

当您想打开新选项卡/窗口时(取决于您的浏览器配置默认值):

output = 'Hello, World!';
window.open().document.write(output);

例如,当输出是一个Object并且您想要获取 JSON 时(也可以生成任何类型的文档,甚至是 Base64 编码的图像)

output = ({a:1,b:'2'});
window.open('data:application/json;' + (window.btoa?'base64,'+btoa(JSON.stringify(output)):JSON.stringify(output)));

更新

谷歌浏览器 (60.0.3112.90) 阻止此代码:

Not allowed to navigate top frame to data URL: data:application/json;base64,eyJhIjoxLCJiIjoiMiJ9

当您想将一些数据附加到现有页面时

output = '<h1>Hello, World!</h1>';
window.open('output.html').document.body.innerHTML += output;

output = 'Hello, World!';
window.open('about:blank').document.body.innerText += output;
我的弹出窗口被 chrome 阻止,然后document因为window.open未定义而无法工作因此,请确保您的弹出窗口是用户操作的直接结果。更多信息请阅读:stackoverflow.com/questions/4602964/...
2021-03-30 02:57:42

parent.html 中:

<script type="text/javascript">
    $(document).ready(function () {
        var output = "data";
        var OpenWindow = window.open("child.html", "mywin", '');
        OpenWindow.dataFromParent = output; // dataFromParent is a variable in child.html
        OpenWindow.init();
    });
</script>

child.html

<script type="text/javascript">
    var dataFromParent;    
    function init() {
        document.write(dataFromParent);
    }
</script>
它在 OpenWindow 上给出了未定义的函数 init()。谷歌浏览器
2021-03-18 02:57:42
这有多安全?您不是通过 URL 传递数据,但会不会在某处进行拦截?
2021-03-22 02:57:42
如何将 jquery 变量/元素从父页面传递给子页面?@ray-cheng
2021-04-11 02:57:42

这是您可以尝试的方法

  • 在 mypage.html 中写一个函数 say init() 来做 html 的事情( append 或什么)
  • 而不是在 dom 准备好时OpenWindow.document.write(output);调用OpenWindow.init()

所以父窗口会有

    OpenWindow.onload = function(){
       OpenWindow.init('test');
    }

在孩子身上

    function init(txt){
        $('#test').text(txt);
    }
我收到“OpenWindow.init is not a function”错误,我定义了函数: <script> function init(code) { $('#dummy').html(code); }</脚本>
2021-03-18 02:57:42
OpenWindow.init(); 永远不会被执行:(无论如何谢谢
2021-04-09 02:57:42

当您document.write在页面加载后调用时,它将消除所有内容并将其替换为您提供的参数。而是使用 DOM 方法来添加内容,例如:

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
var text = document.createTextNode('hi');
OpenWindow.document.body.appendChild(text);

如果你想使用 jQuery,你会得到一些更好的 API 来处理。例如:

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
$(OpenWindow.document.body).append('<p>hi</p>');

如果您需要在新窗口的 DOM 准备好后运行代码,请尝试:

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
$(OpenWindow.document.body).ready(function() {
    $(OpenWindow.document.body).append('<p>hi</p>');
});
这对我不起作用,起作用的是- $(printWindow).on('load', function () { $(printWindow.document.body).find('#page-content').html(printContent ); });
2021-03-28 02:57:42
我编辑了我的答案以将代码包装在 $(document).ready 块中。试试那个。
2021-04-03 02:57:42
它不工作,如果我在调试时这样做,新窗口有时间加载并添加“hi”,一切正常,但在正常情况下,“hi”首先出现,然后页面加载覆盖一切:S 感谢您的帮助
2021-04-04 02:57:42

如果要使用发送数据 POST 或 GET 方法打开页面或窗口,可以使用如下代码:

$.ajax({
    type: "get",  // or post method, your choice
    url: yourFileForInclude.php, // any url in same origin
    data: data,  // data if you need send some data to page
    success: function(msg){
                console.log(msg); // for checking
                window.open('about:blank').document.body.innerHTML = msg;  
               }
});