0

I need to create a tightly controlled environment for opening certain pages that need back and forward navigation controls. I had poked around on here and found this question and tried to implement it, but I'm having a problem.

I have the following for the HTML and Javascript going on, assume it's already styled (reusing code from previous project), and JQuery is already listed in the <head></head> tags:

<body>
    <div id="header">
        <div id="shortcutbar">
            <a id="backBtn" onclick =="iframeBack();"></a>
            <a id="forwardBtn" onclick =="iframeForward();"></a>
        </div>
    </div>
    
    <div id="displayContainer">
        <iframe id="display" src="https://website.goes.here/">
        </iframe>
    </div>

    <script>
        function iframeBack() {
            $("#display").contentWindow.history.go(-1);
        }
        function iframeForward() {
            $("#display").contentWindow.history.go(1);
        }
    </script>
</body>

Checking the console, I get the following error: Uncaught TypeError: Cannot read property "history" of undefined and it gives both whatever line the function is called in the HTML, and the line of the function itself in the script tags.

I'm at a loss of what isn't working, as everything I've found thus far just refers to some variation of what I've already typed.

Anthony LoPrimo
  • 148
  • 14

2 Answers2

1

The jQuery object doesn't have contentWindow property.

You need the underlying element ... $("#display")[0].contentWindow.

With that said if the iframe source is from a different origin than the main page you are security restricted from accessing the frame window using javascript

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Does this also apply if you disable web security in the command line arguments? – Anthony LoPrimo Jul 21 '21 at 23:25
  • Never tried to be honest and is probably a bad idea – charlietfl Jul 21 '21 at 23:28
  • For general use, I agree, but this would be in a tightly regulated environment utilizing intranet sites, never intending to allow the end user to access the internet (I would be setting up a separate instance/session of chrome, so it wouldn't even work with other chrome browsers). Hence why I would be making my own "UI" and loading web pages in iframes. At least, what I was reading about that sorta stuff is leading me to believe I should be fine with that kind of setup (I'm using app mode for everything, anyway, so no browser chrome to begin with) – Anthony LoPrimo Jul 21 '21 at 23:54
  • Try it and see is all I can suggest – charlietfl Jul 21 '21 at 23:56
  • I was able to get a new eror, detailing `blocked a frame with origin "null" from accessing a cross-origin frame.` I'm going to mark your answer as the answer, and I'll tinker from here. Thank you so much! – Anthony LoPrimo Jul 22 '21 at 21:24
  • It's the cross origin security restriction that provides that error – charlietfl Jul 22 '21 at 21:32
  • I thought `--disable-web-security` was supposed to prevent that, that's all. – Anthony LoPrimo Jul 24 '21 at 01:16
0

You can use postMessage also for secure communication

$("#display").contentWindow.postMessage('back');

window.addEventListener('message', ({ data }) => {
  data === "back" && window.history.back()
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

muhammed ikinci
  • 667
  • 2
  • 6
  • 18
  • Trying this, I get the following error: `Cannot read property 'postMesage' of undefined at iframeBack` and I honestly have no clue how to futher tackle this... – Anthony LoPrimo Jul 22 '21 at 21:21