Calling a javascript function in a document created with document.write

Question

I have a web page with a button. The click code is:

var html = ...html string containing visual and script elements...
var view = window.open();
view.document.write(html);
view.init(<parameters>); // see next code block

the html content is:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="id1"></div>
    <script>
        function init(<parameters>) {
             ...work...
        }
    </script>
</body>
</html>

The problem is with the init function call in chrome: all good if I am in IE, but in chrome I get "init function not defined" exception. How should I do to get this working in all browsers? Of course I am looking for a solution that doesn't require a server round trip.

score 0 · Answer 1 · answered Sep 26 '17 at 00:50

0

IM a noob so idk if this is exaclty true but i have read that ie allows you to do alot more then chrome or firefox. It might be one of those example where ie will let you do something.

answered Sep 26 '17 at 00:50

Walter Purvis

25
2
6

score 0 · Answer 2 · answered Sep 29 '17 at 23:27

using document.write does in fact work when it comes to create the page I want. Problem is when I want to call a function defined in a javascript block inside that page. Different browsers give different results so I guess this is a matter not completely standardized yet. There are posts in the internet about this, but I couldn't find a clear and common answer. I then solved my impasse with a workaround. The initial markup contains now placeholders for the parameters:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="id1"></div>
    <script>
        (init = function () {
             var parameter1 = ${{placeholder1}}
             var parameter2 = ${{placeholder2}}
             ...
             ...work...
        })();
    </script>
</body>
</html>

The creating code, then, replaces the placeholders with actual values:

var html = ...html string containing placeholders...
html = html.replace("${{placeholder1}}", actual1);
html = html.replace("${{placeholder2}}", actual2);
...
var view = window.open();
view.document.write(html);

Now the init function is called in the same page context, and this works in Chrome as well.

score -1 · Answer 3 · answered Sep 26 '17 at 01:04

-1

It is not possible to write to a new window if its not on the same domain. What I suggest is that you can open an iframe an work inside that.

How to write to iframe

How to write to page on same domain

answered Sep 26 '17 at 01:04

Andreas Moldskred

305
3
16

Of course you can create a new window and write to it. When you do this, you are creating a virtual document. The domain is not an issue in this case. – Scott Marcus Sep 26 '17 at 01:07

Calling a javascript function in a document created with document.write

3 Answers3