Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE: iframe.contentDocument: Object doesn't support property or method 'Symbol(Symbol.iterator)_* #10453

Open
htho opened this issue Sep 17, 2019 · 4 comments

Comments

@htho
Copy link

commented Sep 17, 2019

Hi,

the original bug #4075 is long gone. But I got the same error in my setup and I want to document the solution, because somebody might face a similar issue.

I used an old version of html2canvas (0.5.0-beta4). for...of loops failed for elements selected inside the onclone callback (html2canvas clones the part of the dom that should be screenshotted).

Inside this callback, clonedRoot.childNodes is not an instanceof NodeList. This is true for the old version of html2canvas and the current version, but the exception is gone.

I dont have the time to investigate this deeper, but I just wanted to share this information. Maybe someone has a similar issue with some other library.

@htho

This comment has been minimized.

Copy link
Author

commented Sep 17, 2019

since this is just fyi i close it now.

@htho htho closed this Sep 17, 2019
@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Sep 17, 2019

Hey @htho! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

@htho htho changed the title IE errors: Object doesn't support property or method 'Symbol(Symbol.iterator)_ - remark IE: iframe.contentDocument: Object doesn't support property or method 'Symbol(Symbol.iterator)_* Sep 17, 2019
@htho

This comment has been minimized.

Copy link
Author

commented Sep 17, 2019

Well,

I need to reopen this issue, because an update in fact did not fix my problem. I don't know why it worked temporarily.

It has nothing to do with html2canvas, but with elements in an iframe. (html2canvas creates the clone in an iframe)

Here is my test code:

function test(){
    console.log("-- TEST DOCUMENT --");
    
    document.body.insertAdjacentHTML("beforeend", "<div><span id='a' class='foo'></span><span id='b' class='foo'></span></div>");
    
    runTestFor(document.body); // WORKS
    
    
    console.log("-- TEST IFRAME --");
    
    const iframe = document.createElement("iframe");
    document.body.appendChild(iframe);
    iframe.contentDocument.body.insertAdjacentHTML("beforeend", "<div><span id='a' class='foo'></span><span id='b' class='foo'></span></div>");
    
    runTestFor(iframe.contentDocument.body); // -> ERROR!
}

function runTestFor(/** @type {HTMLElement} */ root) {
    const collection = root.getElementsByClassName("foo");
    console.log("collection:");
    console.log(collection);
    console.log("collection instanceof HTMLCollection:", collection instanceof HTMLCollection);
    
    // // With a timeout the same variables get renderd differently in IE
    // // but they still are not a HTMLCollection
    // await new Promise((resolve, reject) => {setTimeout(()=>{resolve()}, 500)});
    // console.log("collection:");
    // console.log(collection);
    // console.log("collection instanceof HTMLCollection:", collection instanceof HTMLCollection);

    console.log("test for...of");
    // for(const child of Array.from(collection)) { // WORKS
    for(const child of collection) { // -> ERROR!
        console.log(child.id);
    }
}

Somehow an HTMLCollection within an IFrame is not an HTMLCollection.
Of course adding Array.from(collection) would fix it, but that is not the point of babel - right?

@htho htho reopened this Sep 17, 2019
@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Sep 17, 2019

An iframe is like a new page, with new JavaScript bultin objects. If you want things inside the iframe to be polyfilled, you need to load the polyfill inside the iframe:

iframe.contentDocument.head.appendChild(`
	<script
		type="test/javascript"
		src="https://unpkg.com/browse/core-js-bundle@3.2.1/minified.js"
	></script>
`)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.