Coder Social home page Coder Social logo

Refreshing a document inside an iframe which loads d-r-e breaks the polyfill and leaves document.createElement as undefined about document-register-element HOT 15 CLOSED

franktopel avatar franktopel commented on June 22, 2024
Refreshing a document inside an iframe which loads d-r-e breaks the polyfill and leaves document.createElement as undefined

from document-register-element.

Comments (15)

WebReflection avatar WebReflection commented on June 22, 2024 2

It should've been fixed with 1.14.2 ... thanks gosh it was deadly simple to patch

from document-register-element.

WebReflection avatar WebReflection commented on June 22, 2024 2

Can your describe the problem and how you addressed it?

Problem if you overwrite a host object method within an iframe, when such iframe reloads such method won't be the inherited one, but undefined instead (the shadowed override won't persist).

Minimal steps to reproduce in IE11 using this file as iframe content:

<!DOCTYPE html>
<script>
console.log(document.createElement);
document.createElement = function () {};
setTimeout(function () { location.reload(true); }, 5000);
</script>

Solution deleting the prototypal inherited shadowed method right before the possible iframe refresh/reload fixes the issue.

<!DOCTYPE html>
<script>
console.log(document.createElement);
document.createElement = function () {};
setTimeout(function () { location.reload(true); }, 5000);
addEventListener('beforeunload', function () { delete document.createElement; }, false);
</script>

I assume this can be relevant for alot of polyfill code.

They don't talk to me, not sure I should talk to them.

Maybe as a section "polyfilling caveats with IE11 and iframes" in your readme.md?

Not really, as there's no caveat, since the poly provides a solution already, so there's nothing to be worried about.

Or as a separate blog post?

I've already twitted about it, there's not much to add, IMO (and if they don't follow me, they won't read my blog post neither).

Because of your follow up, I am assuming you are also confirming the issue has been solved though, so thanks for coming back.

from document-register-element.

WebReflection avatar WebReflection commented on June 22, 2024 2

OK, I've double checked this time, and everything seems to be fine.

Please let me know if that's not the case.

If you are curious about what's the difference now, basically I delete also document.importNode and document.registerElement so that next frame reload won't have any sort of issue.

from document-register-element.

franktopel avatar franktopel commented on June 22, 2024 2

Thanks alot for your lightning fast reaction times. I can confirm that both in the MVCE as well as in our application the error does no longer occur.

Good job!

from document-register-element.

WebReflection avatar WebReflection commented on June 22, 2024

can you please try with fully qualified CDN name as in https://unpkg.com/[email protected]/build/document-register-element.js ? it looks like unpkg is having issues, with any browser

from document-register-element.

franktopel avatar franktopel commented on June 22, 2024

Done. Problem remains the same. Is also the same on our real product where we import the script from node_modules and run it through webpack.

from document-register-element.

WebReflection avatar WebReflection commented on June 22, 2024

I can reproduce, yes. This is super messed up ... apparently IE loses its core definitions on iframe reloads, I've no idea if I can even fix this, but I'll try when I'll have time.

from document-register-element.

franktopel avatar franktopel commented on June 22, 2024

Not sure, but could this be related? https://javascript.info/cross-window-communication#iframe-wrong-document-pitfall

from document-register-element.

WebReflection avatar WebReflection commented on June 22, 2024

no, it's the usual IE11 BS; try this code in the iframe and read undefined after 5 seconds.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    console.log(document.createElement);
    document.createElement = function () {};
    setTimeout(function () { location.reload(true); }, 5000);
    </script>
</body>
</html>

from document-register-element.

franktopel avatar franktopel commented on June 22, 2024

Will give it a ride in the office tomorrow and let you know how it went. Thanks for caring!

from document-register-element.

franktopel avatar franktopel commented on June 22, 2024

Can your describe the problem and how you addressed it? I assume this can be relevant for alot of polyfill code. Maybe as a section "polyfilling caveats with IE11 and iframes" in your readme.md? Or as a separate blog post?

from document-register-element.

franktopel avatar franktopel commented on June 22, 2024

Unfortunately your fix only solves the issue for the first refresh.

Immediately refresh again, and document.createElement again is undefined.

Additionally it throws an Object expected error in the console:

grafik

I updated the demonstration repository accordingly so you can reproduce it easily.

Do you think this could and should be raised as bug report with Microsoft?

from document-register-element.

WebReflection avatar WebReflection commented on June 22, 2024

This is not what I am experiencing. This is the exact code, used as iframe of your repo example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    console.log(document.createElement);
    document.createElement = function () {};
    setTimeout(function () { location.reload(true); }, 5000);
    addEventListener('beforeunload', function () { delete document.createElement; }, false);
    </script>
</body>
</html>

Screenshot from 2019-08-14 16-22-31

from document-register-element.

franktopel avatar franktopel commented on June 22, 2024

Your example does not involve your polyfill. If I had to guess I'd go with your polyfill probably not being executed due to the necessity checks on iframe refresh, and thus, the event listener for beforeunload not being added? Did you even check with my repository code, respectively with your polyfill?

from document-register-element.

WebReflection avatar WebReflection commented on June 22, 2024

I thought you had those issues with the minimal reproducible code I've provided, while you meant the poly fails, and I've probably tested too quickly and hoorrayed too soon.

Will have a look later on today, the fix will be the same regardless, but the listener added at the beginning of each check, instead of at the end, dropping all patches in there (I thought it was just one, maybe it's more).

from document-register-element.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.