0

I am looking for a way to replace the content of the src attribute for an iframe with a dummy variant containing the original src value (but will not actually fetch anything). I am loading the html code via Ajax so I can change the src-attribute before the code is injected into the DOM - so I don't need help with that part. What I would appreciate feedback on is what to put in the src attribute. There is a related post here discussing what can go in the src attribute, but in contrast to this post, I want to store data (namely the original src value) so that I can extract it later. It seems the alternatives are:

src="javascript:/*http://originalsrcvalue.com*/" src="about:blank/*http://originalsrcvalue.com*/" src="#http://originalsrcvalue.com"

I am leaning towards the last variant using bookmarks. I'm looking for feedback on potential problems or cross-browser issues that might arise or suggestions for alternative solutions.

Edit: One way of addressing the problem is to use custom attributes - and this is probably what I'll end up using in this specific case. However, I would also like feedback on ways to store data in src-tags in the fashion showed above.

Community
  • 1
  • 1
instantMartin
  • 85
  • 2
  • 8

1 Answers1

1

You could store the actual URL to a data-your-data-name attribute and fetch it with Javascript when you need it, by doing element.getAttribute('data-your-data-name') or if you don't care much about IE users, by element.dataset.yourDataName

References:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Dimitris Karagiannis
  • 8,942
  • 8
  • 38
  • 63
  • I considered using a custom attribute and I've tried with various versions such as the html5-flavored data-... variant that you suggest. I realized that I was missing some necessary information in my question, so I edited and added some more information about the way I change the code before injecting it - I inject the changed content as html text, and it seems that in this process only the supported attributes are transferred. That's the reason that I wanted to use the src attribute in this way. – instantMartin Mar 13 '15 at 09:02
  • @instantMartin What part of your HTML are you fetching with AJAX? The Iframe as a whole? Also, after you have transformed it into an HTML string (e.g. `'
    example
    '`), you have two options: Either add it a `data-` attribute while it's still text and then do `container.innerHTML = HTMLstring` where `container` is the parent of the iframe, OR since you have it as HTML text, simply do `container.innerHTML = HTMLstring` and _then_ add the `data-` attribute to the resulting actual DOM. I don't really understand where do you need to use a DOM parser and what exactly it does.     – Dimitris Karagiannis Mar 13 '15 at 09:14
  • I've done some more testing and realized that I was making a mistake when writing and retrieving a custom attribute - I'm still working it out, but I think it was a mix of supplying the wrong mime-type to the DOMParser (text/xml instead of text/html) and the way I was accessing the attributes (attaching directly to the iframe-object iframe.attribute instead of iframe.set/getAttribute (works with text/html and src, but not custom attributes). So, it seems that a custom attribute indeed like you @mitch suggested does indeed work. – instantMartin Mar 13 '15 at 10:04
  • And for the question (from @mitch) on why to use a DOMParser: By putting the raw html into a DOM parser I can access and modify the content much more readily - and apart from manipulating the src attributes I do some other stuff. Since I server the html via AJAX and create the html on the server, an obvious alternative is to just serve the type of html I want from the beginning, but I'm playing around with the concept of keeping backend simple and moving more of the processing to the client side - a "thick client" approach. – instantMartin Mar 13 '15 at 10:08
  • FYI @mitch I edited the the previous edit. While your suggestion for a custom attribute solves my immediate problem, I am interested also in what can go into a reserved attribute such as src. – instantMartin Mar 13 '15 at 10:13
  • @instantMartin Glad I was able to help you. As for what can go into `src` , well, it expects a URL string. For more information, see this http://stackoverflow.com/questions/5946607/is-an-empty-iframe-src-valid and this http://stackoverflow.com/questions/10017072/create-an-iframe-with-an-empty-src-thats-a-standards-compliant-alternative-to – Dimitris Karagiannis Mar 13 '15 at 10:46
  • Thanks @mitch for the link tips - I had seen one of them, but got some interesting additional info from http://stackoverflow.com/questions/5946607 about leaving src blank can have consequences. Looks like `src="about:blank#http://originalsrcvalue.com might be the best option. – instantMartin Mar 13 '15 at 12:12