Search code examples
javascriptstringvariablestostring

.toString cause Cannot read properties of undefined (reading 'toString') when have variable

I want to open a link(php file) in new tab and add js code to that file. I have use method shown here to do this process. In my code, I have variable which contain text to add in js code. I want to insert the variable value, "garry" in index.php input field. Error show Cannot read properties of undefined (reading 'toString'). The input field remain blank. I have tried the following ways before pass to toString() but not working.

  • term=term.toString(); -Cannot read properties of undefined (reading 'toString')

  • term='${term}'; -Cannot read properties of undefined (reading 'toString')

  • term=${term}; -tried adding back tick=* Cannot read properties of undefined (reading 'toString')

  • term=String(term); -Cannot read properties of undefined (reading 'toString')

<html>
<head>
    <script>
        var topic='1_1_1_2_anchors_';
        $(document).ready(function(){
            childWindow     ="tab1";    
            //https://stackoverflow.com/questions/29909927/inject-an-opened-window-with-script          
            var theWindow   =window.open('index.php'),
            theDoc          =theWindow.document,
            theScript       =document.createElement('script');
            var term        ="garry";
           
           function injectThis(term) 
            {
            //term=term.toString(); //=Cannot read properties of undefined (reading 'toString')
            //term='${term}';   //= Cannot read properties of undefined (reading 'toString')
            //term=`${term}`;   //=Cannot read properties of undefined (reading 'toString')
            //term=String(term); //=Cannot read properties of undefined (reading 'toString')
               $("#input_name").val(term);
            }
            theScript.innerHTML             ='window.onload = ' + injectThis(term).toString() + ';';
            theDoc.body.appendChild(theScript);
        })
    </script>
</head>
<body>
    <h1>Main</h1>
</body>
</html>

index.php

<html>
<head>
    <script src="jquery/dist/jquery.min.js"></script>
</head>
 <body>
   <input id="input_name" type="text" value="">
</body>

if hardcode the value in $("#input_name").val("garry"); Then it works.

function injectThis()
 {
    $("#input_name").val("garry");
 }
    theScript.innerHTML  ='window.onload = ' + injectThis.toString() + ';';

How to pass variable?

Solution

  • I have define the var term ="garry"; outside document.ready(function(){}). Then, I get the variable value by define term=window.opener.term; inside function injectThis(){}.

    The Window interface's opener property returns a reference to the window that opened the window, either with open(), or by navigating a link with a target attribute.

    Using window.opener object, we can access variable declared in that file.

    After that, change injectThis(term).toString() to injectThis.toString() in theScript.innerHTML ='window.onload = ' + injectThis.toString() + ';';

    <html>
<head>
<script src="jquery/dist/jquery.min.js"></script>
<script>
     var term        ="garry";
    $(document).ready(function(){
        childWindow     ="tab1";    
        //https://stackoverflow.com/questions/29909927/inject-an-opened-window-with-script          
        var theWindow   =window.open('index.php'),
        theDoc          =theWindow.document,
        theScript       =document.createElement('script'); 
        //term=term.toString(); //=Cannot read properties of undefined (reading 'toString')
        //term='${term}';   //=Cannot read properties of undefined (reading 'toString')
        //term=`${term}`;   //=Cannot read properties of undefined (reading 'toString')
        //term=String(term); //=Cannot read properties of undefined (reading 'toString')
       function injectThis()
        {
           term=window.opener.term;
           $("#input_name").val(term);
        }
        theScript.innerHTML  ='window.onload = ' + injectThis.toString() + ';';
        theDoc.body.appendChild(theScript);
    })
   </script>
  </head>
 <body>
 <h1>TOPIC 4</h1>
  </body>
  </html>

    index.php

    <html>
<head>
    <script src="jquery/dist/jquery.min.js"></script>
</head>
 <body>
   <input id="input_name" type="text" value="">
</body>