If you set the border to something visible like 3px solid red you can clearly tell that no CSS will save you here:
As others have pointed out in the comments this is caused by the javascript:… source attribute. To determine whether there is a full workaround, we'd likely need more information on exactly what part of the <iframe> you are able to change, since you can evidently give it a style attribute. That said, here are some things you can try:
If you can change the src attribute to something completely different
My suggestion would be to have a separate frame.html file with the old src attribute wrapped in a <script> tag, without the javascript: at the beginning:
<script>window.open('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', '_self')</script>
Then, you can change the <iframe> to point to the file. Few things to note:
- I removed the
seamless attribute as it's currently not in the spec and not supported by any browser.
- The
scrolling and frameBorder attributes are obsolete as of HTML5, so I used CSS instead.
- I found that the
T in allowTransparency is meant to be capitalized, but I'm not 100% on that.
<iframe
src="frame.html"
allowTransparency="true"
style="border: 0; overflow: hidden">
</iframe>
After these changes the <iframe> appeared as you would expect.
If the value is fixed, but you can add stuff around it
If you cannot move the javascript part, but are able to alter the src attribute otherwise, you may find a data: URL useful instead as an alternative to a separate file. All you need to do is to wrap the attribute's current value in data:text/html;utf8,<script>{ and }</script>. This creates a valid data: URL pointing to an UTF-8 encoded HTML file that we provide immediately after, which has the same script tag in it. I added brackets to make the javascript: part valid JS syntax by using it as part of an object initialization. This way, the code won't fail due to a syntax error, and window.open is still called.
If you can add JavaScript around the <iframe>
This can also be fixed by some good old JS hackery, using the same method as the first section, but without altering any of the fixed parts or requiring a new file, provided you are able to add JS code outside the <iframe>. Put the following script tag below the <iframe> or place it in a workaround.js file (without the <script> tags) and link it externally. For best results and to make sure any <iframe> elements are parsed by the time the script runs, I suggest placing your <script> tags at the bottom of the <body>.
<script>
(function(){
var frames = document.querySelectorAll('iframe[src^="javascript:"]');
for (var i = 0, l = frames.length; i < l; i++)
frames[i].src = frames[i].src.replace(/^javascript:(.*)$/, 'data:text/html;utf8,\x3cscript>$1\x3c/script>');
})();
</script>
This will find all <iframe> tags on the page with a src attribute that starts with javascript: and run the workaround on each of them, fixing the issue.
If none of the above applies
I'm afraid you're out of luck. Short of reporting the issue to Microsoft and getting it fixed you are unlikely to find another solution, to my understanding.
