none
Opening an HTML file in Expression Web changes it adversely (adds style sheets and code) RRS feed

  • Question

  • I just converted some pages in one of my web sites to use bootstrap, and to have an iframe that talks to Google's Blogger in a pretty simple way. I'm not sure which of these is causing the problem. But now when I open this file in Expression Web, it edits the file in some really gross ways, inserting a truckload of extra style stuff that appears to be from Blogger. Why does the file I open not look like the file on disk? 

    I can give more details if it would help, but it might be spammy.  The file I'm trying to open is pretty simple and clean. You can see it at my home page, nhplace.com/kent, by just doing View Source. That's what the file looks like on disk. But when I edit it in Expression Web, it has extra libraries, a huge Blogger style sheet I don't need, and other junk that I don't want to edit or save.

    Is there a way to turn off this not-at-all-helpful behavior?  If not, is there at least a way to predict or understand it? I can't figure out what it's trying to do or why.

    Sunday, May 26, 2019 3:30 PM

All replies

  • The following is a stripped down version of the problem file:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
      <iframe src="http://netsettlement.blogspot.com/?m=1" height="600" width="100%"></iframe>
    </body>
    </html>
    

    If I edit the URL in the iframe to use just BlogSpot.com instead of netsettlement.blogspot.com, the problem does not occur, so I assume Expression Web is trying to do something "smart" about the iframe, but it utterly trashes my source file in an unnecessary way that makes it impossible to usefully edit this file in EW.  Double-clicking the above file to open it gives me a file 950 lines long.

    Sunday, May 26, 2019 4:36 PM
  • I'll show the start of the 950 line version, but I've elided parts with "...".

    <!DOCTYPE html>
    <html class='v2' dir='ltr' lang='en'>
    <head>
    <link href='https://www.blogger.com/static/v1/widgets/1171200566-widget_css_mobile_2_bundle.css' rel='stylesheet' type='text/css'/>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='blogger' name='generator'/>
    <link href='http://netsettlement.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
    <link href='http://netsettlement.blogspot.com/' rel='canonical'/>
    <link rel="alternate" type="application/atom+xml" title="netsettlement - Atom" href="http://netsettlement.blogspot.com/feeds/posts/default" />
    <link rel="alternate" type="application/rss+xml" title="netsettlement - RSS" href="http://netsettlement.blogspot.com/feeds/posts/default?alt=rss" />
    <link rel="service.post" type="application/atom+xml" title="netsettlement - Atom" href="https://www.blogger.com/feeds/94745530352207663/posts/default" />
    <link rel="me" href="https://www.blogger.com/profile/10256875390684654243" />
    <!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/1961721879-ieretrofit.js"></script>
    <![endif]-->
    <meta content='Kent Pitman&#39;s blog. Independent, progressive views on Society, Technology, Social Justice and Climate, or sometimes poetry, philosophy, or history.' name='description'/>
    <meta content='http://netsettlement.blogspot.com/' property='og:url'/>
    <meta content='netsettlement' property='og:title'/>
    <meta content='Kent Pitman&#39;s blog. Independent, progressive views on Society, Technology, Social Justice and Climate, or sometimes poetry, philosophy, or history.' property='og:description'/>
    <!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
    <title>netsettlement</title>
    <style id='page-skin-1' type='text/css'><!--
    /*
    -----------------------------------------------
    Blogger Template Style
    Name:     Simple
    Designer: Blogger
    URL:      www.blogger.com
    ----------------------------------------------- */
    
    /* Content
    ----------------------------------------------- */
    body {
    font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #222222;
    background: #eeaa00 none repeat scroll top left;
    padding: 0 10px 10px 10px;
    }
    html body .region-inner {
    min-width: 0;
    max-width: 100%;
    width: auto;
    }
    ...
    --></style>
    ...
    </head>
    ...
    </html>
    
    
    

    Sunday, May 26, 2019 4:37 PM
  • You are looking at the iframe contents, which EW is showing you in Design View.  Click above/below/outside the iframe, in Design View, and you'll see your own markup in Code View.

    Kathleen Wilber
    BrightWillow - Asp.Net Applications




    • Proposed as answer by KathyW2 Sunday, May 26, 2019 9:53 PM
    • Edited by KathyW2 Monday, May 27, 2019 12:11 PM
    • Unproposed as answer by KentPitman Monday, May 27, 2019 6:02 PM
    Sunday, May 26, 2019 8:09 PM
  • Hi, Kathy.

    Thanks very much for the suggestion, even though it's not one I can use. It's nice to know someone is reading along. 

    There is no place to click inside the code window, but yes, if I go into the display area and move my cursor, it takes me out. Visually my cursor was not in the iframe in the display area in the first place. So that's just weird. (I'm not configured with any in-app previewing if there is such a thing.)

    (Perhaps I was too hasty in unproposing your solution. Someone may be able to do the thing you're suggesting. But it doesn't work for my situation. I'm not sure about the etiquette of that, so apologies if I screwed that up.  Your suggestion might help some people, but it won't help me. I was trying to "respond" to the proposal, not really undo it...)

    The rest of this is just for the record so read on only if you'd like to know what workaround I settled on, and why.

    I don't want to work around the problem interactively, I want a solution that never gets me into the situation. The iframe in my real situation is in a div that is not even visible at page load time, so clicking in or out of that frame in the display area is kind of problematic. There's also no reason that an inactive iframe should be grabbing editor focus the way it was. I hadn't asked to move to that position in the display and to open the invisible frame. Making a fresh version of this file and opening it, I found that it instantly again yanked the focus down into this mass of iframe nonsense rather than leaving me at the start of the clean file I had made. That's just wrong.

    Plus I am ill at ease about accidentally saving this conjured pile of stuff. I don't know where it would go, but every aspect of being in it is not a good user experience.  So I just want it to not happen.

    To see the real context , you can see my website (nhplace.com/kent, search for iframe). I left the old iframe position in a comment when I rearranged things, and it should be easy to sort out what I'm doing instead now and why. Basically I'm dynamically constructing the iFrame via jQuery at page load time so the EW code analysis stuff can't see it and can't get "clever" on me.

    The stripped down version of what I did, which is really just a band-aid/workaround, is as follows.  I'm glad I don't have a lot of iframes or this approach would be too tedious.

    <div id="BlogPanel">
     <!--<iframe src="http://netsettlement.blogspot.com/?m=1" height="600" width="100%"></iframe>-->
    </div>
    <script>
     $( '#BlogPanel' ).append( '<iframe src="http://netsettlement.blogspot.com/?m=1" height="600" width="100%"></iframe>' );
    </script>
    

    Anyone following along will need to note that jQuery is not a JavaScript builtin and some form of the library has to be loaded earlier in the file for this to work. Probably something like this, though I didn't test it

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    Monday, May 27, 2019 6:30 PM
  • Cick outside the iframe IN DESIGN VIEW.   It works.   I also don't understand what you mean that you can't use that solution.  If you don't want to see the iframe in Design View at all, just comment out the iframe line while you are working on the rest of the page.

    Kathleen Wilber
    BrightWillow - Asp.Net Applications


    • Edited by KathyW2 Monday, May 27, 2019 9:29 PM
    Monday, May 27, 2019 9:27 PM
  • I am pretty sure you are not seeing the problem.  Sometimes when I do it, it doesn't happen either, so probably you haven't gotten the state that I'm complaining about.  I have seen it both with the big file and the little file, but as I try to construct a better example, now it's not happening for either when a few minutes ago it was. There may be some additional state in EW that I'm not accounting for.

    But also, you mention design view and some of the issue is that I mostly try to stay exclusively in code view, or else split, but never design view. This is the main reason I use Expression Web. I don't trust the WYSIWYG editor to do correct editing of my code. It's the one code editor that gave me a lot of control of this. I want to know at all times what's in the HTML source, and I use Design view (or more often Split view) only as an approximate preview.

    And the iframe is an extremely minor (and hence initially hidden) part of the page. I threw it in as almost an afterthought, but the idea of editing it out every time I want to edit the page is not reasonable. When the bug is happening, it is not possible to open the page at all without it grabbing focus and becoming something I have to climb out of, and since the iframe is not likely to be the reason I'm opening the file at all, it's a waste of time. The workaround I have is modest and doesn't require my editing anything out that I have to put back. It lets me go about editing the rest of the page trivially.

    The whole point of an iframe is that it's a separate experience. If I wanted to be editing that file, I would edit it where its home is, not as an embedded part of another file. If Expression Web were still being developed, I would just ask for a preference option to turn off whatever "feature" it is that keeps happening. It's not a feature for me.

    Anyway, thanks again for your help, but I've exhausted the time I have on this, and fortunately have a solution that will get me by for now.

    Tuesday, May 28, 2019 7:08 AM
  • "But also, you mention design view and some of the issue is that I mostly try to stay exclusively in code view, or else split, but never design view. This is the main reason I use Expression Web. I don't trust the WYSIWYG editor to do correct editing of my code. It's the one code editor that gave me a lot of control of this. I want to know at all times what's in the HTML source, and I use Design view (or more often Split view) only as an approximate preview."

    I did not tell you to work in Design View.  I told you how to get out of the iframe HTML and into your local page HTML by clicking outside of iframe in Design View (Split View - you don't have to be exclusively in Design View).  At that point you are in your local page Code in Code View.


    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    Saturday, June 1, 2019 8:13 PM