Add iframe content to parent documet using local files

Question

I have some code to take content out of a page within an iframe and adding it to the parent page. The parent and iframe source page are in the same directory so no cross domain issues.

This will work on a server but apparently not if all the files are running local on your computer. I was tearing my hair out before I figured that out. Running the files locally just gives cont2 an undefined value.

I need to run this locally without a server because of the sensitivity of the files I'm dealing with. I don't know how to do that though.

I tried setting document.domain="local.com" in both files but that didn't work.

Any way to do this?

Thanks

Parent Page:

<html><head>
    <script  src="https://code.jquery.com/jquery-3.3.1.js"></script></head><body>
    <iframe id="frame1" src="page1.html"></iframe><br>
    <button id="button2">Something</button>
    <script>$("#button2").click(function(){
        cont2 = $("#frame1").contents().find("div").html();
        console.log(cont2);
        $("#div2").html(cont2);
    });</script>
    <div id="div2">TBD</div>
</body></html>

iFrame Source:

<html>
    <head></head>
    <body>
        <div id="div1">TODO write content</div>
    </body>
</html>

Looks like there are someways to disable the cross site scripting in your browser temporarily. I'll post again if I figure it out. — joecap5, Sep 01 '18 at 22:34

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Some versions of IE will allow this to work out of the box. Seems like it treats local files as on the same server.

For Chrome, you need to temporarily disable a couple things. See: Disable same origin policy in Chrome

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 06 '18 at 11:04

joecap5

169
5

Add iframe content to parent documet using local files

1 Answers1