0

I have created a web page with Javascript code that dynamically creates a new page. The problem I have is that the Javascript functions are not "seen" by the created page, so they cannot be called. It works perfect in Chrome and Safari browsers, in which it seems the context (known variables and functions) is fully passed to the created page, whereas it fails in Microsoft Edge and Internet Explorer My project is quite complex but I could isolate my problem in the simple code sample that creates a web page with a PLUS and a MINUS button to incremement/decrement an index value:

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>JS Tester</title>
</head>

<script type="text/javascript">
    var index = 5;

    $(document).ready(function() {
        callPage();
    });

    function callPage() {
        document.open();
        document.write('<!DOCTYPE html>');
        document.write('<html>');
        document.write('<body>');
        document.write('<button id="DecButton" onclick="decrementIndex()" style="height: 30px; width: 50px"> - </button>');
        document.write('<p id="indexVal">' + index + '</p>');
        document.write('<button id="IncButton" onclick="incrementIndex()" style="height: 30px; width: 50px"> + </button>');
        document.write('<br>');
        document.write('</body>');
        document.write('</html>');
        document.close();
        document.title = 'Generated Page';
    }
    function decrementIndex() {
        index--;
        document.getElementById("indexVal").innerHTML = index;
    }
    function incrementIndex() {
        index++;
        document.getElementById("indexVal").innerHTML = index;
    }
</script>

<body>
Hello World
</body>

</html>

It is also available here: http://emarciano.free.fr/js/tester.html

In Edge browser, clicking on a button causes an error like: 'incrementIndex' is not defined This is probably because the function is unknown from the page generated using document.open() I feel frustrated because it works perfect in Chrome. Is there a way to have it working the same way in Edge?

BTW, I found strange that some examples from W3schools.com do not work as expected in Edge, examples coming from the documentation of the document.open() function:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_write5

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open

Thanks for your help,

Eric

user3560941
  • 1
  • 1
  • Well, just don't use `document.open()`, especially not inside `$(document).ready(…)`. That method is really totally outdated, and has tons of problems - one of which you just experienced. – Bergi Feb 16 '20 at 00:06
  • As an alternative, just replace the content of the current page. Use `document.body.innerHTML = "dynamic html string here";` – Bergi Feb 16 '20 at 00:07
  • @Bergi What can I use instead of document.open() to do the same thing? Can you please give me an alternative? – user3560941 Feb 16 '20 at 09:32

0 Answers0