Why does this iframe load with a border the first time the page is opened but not when the page is reloaded?
Question
When the following page is loaded for the first time (such as when entering the url or opening the file in windows explorer) the iframe is drawn with a border. However, when the page is reloaded/refreshed, there is no border.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe
src="javascript: window.open('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', '_self')"
allowtransparency="true"
style="border: none"
scrolling="no"
frameBorder="0"
seamless="seamless">
</iframe>
</body>
</html>
I am trying to understand the cause of this and possibly find a workaround for an issue I am facing when integrating with Adobe Captivate, which loads Web Objects using the mechanism below. Any help would be appreciated.
This is from Microsoft Edge Build: 42.17134.1.0
Edit: I know that the rendering of the border is somehow related to the javascript scheme url of the iframe, however that is not something I am able to change. I would like to know the mechanism in Microsoft Edge that causes the border of the iframe to render on the first load. No other browser we support (Chrome/Safari/Firefox) renders the border.
2 answers
solution1
1 ACCPTED 2018-08-04 13:05:46
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
seamlessattribute as it's currently not in the spec and not supported by any browser . - The
scrollingandframeBorderattributes are obsolete as of HTML5 , so I used CSS instead. - I found that the
TinallowTransparencyis 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.
solution2
-1 2018-08-04 11:36:24
Can't replicate this problem here. Your screenshot appears to be simply a border, however. Does setting the border using CSS stop this? Ie border: 0;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe style="border: 0px;"
src="javascript: window.open('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', '_self')"
allowtransparency="true"
scrolling="no"
frameBorder="0"
seamless="seamless">
</iframe>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.