html + js: dataset variable being ovewriten after assigning it a value based on src attribute

Question

So I have a for loop that iterates over a list of iframes:

    var iFr;
    for (var i = 0; i < iFrames.length; i++) {
      iFr = iFrames[i];

      if (isFooBar()) {
        iFr.dataset['sourceBackup'] = iFr.src; //assign src value to data-source-backup
        iFr.removeAttribute('src'); // remove src attribute
      }
    }

The weird part is that it seems to remove the src value also from dataset['sourceBackup'] or data-source-backup which I don't understand why. As I'm doing it AFTER assigning it to dataset['sourceBackup'].

UPDATE:

I even tried using object.assign() :

 iFr.dataset['sourceBackup'] = Object.assign({}, {'src': iFr.src}).src;

Yet still the iFr.dataset['sourceBackup'] dataset gets erased for some iframes elements but not for others which is confusing.

Update 2

The problem was with outer code not with the code here. I was having multiple references to the same iframe in different contexts. So this was causing the weird behavior.

Seems to work for me on Firefox: https://jsfiddle.net/8ukkawkv/ — ghybs, Nov 02 '17 at 16:15

score 1 · Answer 1 · answered Nov 02 '17 at 16:02

1

This is happening because both iFr.dataset['sourceBackup'] and iFr.src are pointing to the same object. The assignment does NOT make a copy of the object. Therefore, when you remove the object, it is not available regardless of which reference you use.

To actually clone the object, see this answer: How do I correctly clone a JavaScript object?

answered Nov 02 '17 at 16:02

Jonathan M

17,145
9
58
91

sure I also though that so I tried using Object.assign() + Object.freeze() and they still don't work :/ – CommonSenseCode Nov 02 '17 at 16:04
Please edit your post to show the code using these methods. We'll try to determine why it's not working. However, for the original post, this certainly is what is happening. – Jonathan M Nov 02 '17 at 16:05
I'm not sure how safe it is to clone DOM elements like this. – Barmar Nov 02 '17 at 16:13
I think its safer that the linked one, since its provided by Ecmascript – CommonSenseCode Nov 02 '17 at 16:14
@commonSenseCode: All you're wanting to do is keep a copy of the text value of the source for the iframe, right? – Jonathan M Nov 02 '17 at 16:16
yeah I just want to copy the value of the iframe.src, without it being affected when this value changes or is removed. – CommonSenseCode Nov 02 '17 at 18:11

html + js: dataset variable being ovewriten after assigning it a value based on src attribute

UPDATE:

Update 2

1 Answers1