IE9 iframe src problem with Mixi "like" plugin - iframe

I'm trying to insert a Mixi "like" plugin into a site. The Mixi "like" plugin is just an iframe:
<iframe src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fexample.com%2Findex.html&service_key=0123456789ABC&show_faces=false" scrolling="no" frameborder="0" allowTransparency="true" style="border:0; overflow:hidden; width:450px;height:80px;"></iframe>
The problem I have is that the ?href argument passed to the src attribute is being interpreted by IE9 Standards Mode as an actual link, so clicking on the iframe causes the browser to navigate to that page (in this example, the browser window navigates to http://example.com/index.html).
Switching IE9 to Compatibility Mode doesn't seem to have the problem, but from what I understand that's an end-user option.
Is this a common IE9 problem, where the value of an iframe's src is scraped for an href argument and used incorrectly as a link?

This is not a problem with iframes in IE9, it's a problem with Mixi's javascript. Their scripts use an older version of Prototype (1.6) in which they call an event.stop() to stop propagation. The problem is, that stop() call has problems in IE9. So clicking on the link within their iframe doesn't stop iframe from navigating to that page. This is a problem on Mixi's end, and they need to update their javascript in order to fix it.
See: disable a link in IE9 - prototype stop() not working

Related

On Safari 11, youtube iframe autoplay works on one page but fails on others, same iframe code

This one has me stymied. It's the same iframe code, except of course for the video ID itself. Autoplay works on one page but doesn't on others. All the iframe options are the same; it's built automatically for every page by a PHP script on the site.
Here is a link to the page where the autoplay is working: http://www.theidahoclub.com/
And here is a link to a page where the autoplay does not work: http://www.theidahoclub.com/real-estate/
All pages work correctly on Edge and Chrome. Any ideas? Is there a developer tools equivalent on Safari so I can grab some more debug info? I'm not a Mac owner, but I have someone with the setup where it reproduces, so they can test for me (but they don't develop so they wouldn't know about Mac dev env stuffs).

Won't apply style until refresh HTML

I have index.html and guide.html, I link to the guide.html in the index page. however when i go to the guide one through the link the page won't have the design until I refresh. What am I doint wrong? Each page has its own css.
Here's an image right after I click:
And here's another one right after I refresh:
Could be cached css/html. If it looks right after pressing ctrl+F5 on the page in question, it is working correctly.
Web browsers cache CSS files. I see you're using Chrome for Windows - CTRL + F5 will fully refresh the page, CSS and all.
If this problem appears on a live site for some reason, you could re-name your CSS file to avoid the browser using a cached version. For instance custom.css would become custom-2.css.

Can not display external page in <iframe>, not an X_FRAME issue

I have an iframe - the iframe works when the src points to a page on the same server, allowing me to embed pages.
The same iframe will not allow me to embed pages from another server. I have tried different src= pages and different browsers on Windows, OSX and Linux. I have tried hard-coding the src attribute and setting it programatically.
I haven't worked w html for years and know click-jacking has caused some hosts to disallow their content but am confident this is not the issue.
<iframe src='myPage.html' name='i' id='i'></iframe>
works as expected
<iframe src='http://theirServer/theirPage.html' name='i' id='i'>
</frame>
does not work as expected
Not all sites allow you to embed them via iframe (such as google). if using Chrome, check your console. If you have an error like "Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." then the site does not allow you to embed it.
Basically if the site uses the header X-Frame-Options, and has it set to SAMEORIGIN, there's nothing you can do.

css not loading on postback

On one of my asp.net page, when I access it, It loads and fetches data properly on default criteria. All styles for menu, search criteria controls and gridView controls displays perfectly.
When I click one of the buttons that postback the form and loads data, styles are gone. All styles vanished.
Looking through developer tools and going to CSS tab, all my stylesheets under App_theme are loaded properly on first time access but on postback, when I check through developer tools, No CSS loaded :(
Any idea?
Note:
I am using a masterpage that contains the html form.
I tested on IE version 10 and 8.
First time loading loads all CSS perfectly.
Thanks.
Try using Firebug tool in FF to check if there are any 404 error while loading CSS after form postbacks.
If yes, check the path of CSS that is showing 404 error.

Google Chrome Developer Tools - unable to edit CSS

I'm using Google Chrome developer tools to try different CSS values on a localhost site e.g. changing "border-width: 1px" to "border-width: 2px".
For some reason I am unable to edit. If I click on "1px", I can type in a new value e.g. "2px" but as soon as I hit return, the value returns back to "1px".
For some reason, it is only affecting one site - all other sites I can edit fine.
Any ideas what the problem might be?
Earlier on, I saw a "paused in debugger" notification at the top and the page greyed. Might this have something to do with the problem?
I discovered that the problem was the use #import in the site's style sheet, specifically:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
Once this was commented out, I was able to edit the CSS again.

Resources