Question 408485 in Html Question posted in
Some basic documentation can be found here.

Html – Create function in iframe from parent so that it has Function prototype

I have an application where an iframe loads a Blazor application that needs to use a function (invoked from Blazor) available only in the main page. I can add the parent function into the iframe’s window successfully, but the Blazor library performs an instanceof Function check, which for some reason is not true when loading a function to an iframe’s contentWindow this way, even though the function itself is executable.

Is there a way to construct this so instanceof Function returns true? findJsFunction is provided by Blazor and cannot be modified.

I’ve tried:

  • manually setting the prototype to Function
  • using parent.test
  • defining the function test also in the iframe and then overwriting it

main

<iframe id="myFrame" src="url"></iframe>
<script>
    function test() {
        console.info('test');
    }
    document.querySelector('#myFrame').contentWindow.test = test;
</script>

iframe

<!-- blazor library does something like this -->
<script>
    function findJsFunction(name) {
        // the below is what fails because window[name] is never instanceof Function right now
        // is there a way I can get this to return true?
        if (window[name] instanceof Function) {
            window[name]();
        }
    }
</script>
<button onclick="findJsFunction('test')">Click me</button>
Tags:

3

Answers


  1. 0 
    <iframe id="myFrame" src="url"></iframe>
<script>
    const myObject = {
        test() {
            console.info('test');
        }
    };
    window.myObject = myObject;
    document.querySelector('#myFrame').contentWindow.myObject = myObject;
</script>

    <script>
    function findJsFunction(name) {
        if (typeof window[name] === 'object' && typeof window[name].test === 'function') {
            window[name].test();
        }
    }
</script>
<button onclick="findJsFunction('myObject')">Click me</button>
    Login or Signup to reply.
  2. 0

    Interesting problem, I expect it is to do with context and that your creating a Function in the iframe with the prototype of the parent pages Function object.

    I think to get around this you need to have the function created by the JS runtime context in the iframe.

    The things I think you can try are injecting a script tag to load a JS file, or you could inject a script tag that contains your JS function.

    That was the function will be created with the correct context and should be an instance of the iframe’s Function object.

    Login or Signup to reply.
  3. 0 
    console.log(Function == document.querySelector('#myFrame').contentWindow.Function)

    returns false, so that is likely the cause of your issue.

    Using Object.setPrototypeOf to set the prototype of the test function in the iframe, to the Function of the iframe, appears to work:

    <iframe id="myFrame" srcdoc="&lt;button onclick=&quot;console.log(window.test instanceof Function)&quot;&gt;Click me&lt;/button&gt;"></iframe>

<script>
    function test() {
        console.info('test');
    }
    document.querySelector('#myFrame').contentWindow.test = test;
    Object.setPrototypeOf(document.querySelector('#myFrame').contentWindow.test,
        document.querySelector('#myFrame').contentWindow.Function)
</script>

    That throws security errors here in the snippet, but under https://jsfiddle.net/2j8oLgmt/ I am getting true in the console, when clicking the button in the iframe. (You need to check the real browser console, not the one jsfiddle itself provides.)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search