Search the Community

Did HTML update to where you can't go to a site with a Iframe anymore? If you try to go to a site in a Iframe now you get these errors: 1. Refused to frame 'https://www.w3schools.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://mycourses.w3schools.com". 2. Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Hello everyone, I have an issue where an external iFrame I am loading using Javascript displays fine on iOS, Android and Windows, but doesn't display on Mac Chrome, Firefox or Edge. Using Chrome Inspector, I can see the reason why it doesn't display is because height is set to 0px. If you resize the browser window, the iFrame then displays, as if Chrome is nudged into resizing the iFrame. My thinking is to force the iFrame's height, that way it will be displayed no matter what. I am fairly new to JS, so could someone recommend what that code might look like? Below is my code (a Shopify Buy Button): <div id='product-component-[product component]'></div> <script type="text/javascript"> /*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } function loadScript() { var script = document.createElement('script'); script.async = true; script.src = scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload = ShopifyBuyInit; } function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'golden-moments-usa.myshopify.com', storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '[product id]', node: document.getElementById('product-component-[product component]'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(25% - 20px)", "margin-left": "20px", "margin-bottom": "50px" }, "text-align": "left" }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "width": "100%", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" }, "price": { "font-family": "Lato, serif", "font-weight": "700", "font-size": "20px", "color": "#4d4d4d" }, "compareAt": { "font-family": "Lato, serif", "font-weight": "bold", "color": "#0b1c51" } }, "contents": { "img": false, "button": false, "buttonWithQuantity": false, "title": false, "options": false, "price": true }, "googleFonts": [ "Lato" ] }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": false, "button": true, "buttonWithQuantity": false }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#ed2a47" }, "background-color": "#0b1c51", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" } }, "text": { "button": "Add to cart" } }, "cart": { "styles": { "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px" } }, "text": { "total": "Subtotal" }, "contents": { "note": true } }, "toggle": { "styles": { "toggle": { "font-family": "Lato, sans-serif", "background-color": "#ed2a47", ":hover": { "background-color": "#a81f33" }, ":focus": { "background-color": "#13308a" } }, "count": { "font-size": "14px", "color": "#ffffff", ":hover": { "color": "#c8ad76" } }, "iconPath": { "fill": "#ffffff" } } } }, }); }); } })(); /*]]>*/ </script> Below is the resulting iFrame rendered in browser: <iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe> Below is the full code as it's rendered in browser: <div class="collection-price-div"><div class="additionalprice w-embed w-script"><div id="product-component-1840729411716" class="shopify-buy-frame shopify-buy-frame--product shopify-buy__layout-vertical" style="max-width: 280px;"><iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-4840729411716" style="width: 100%;overflow: hidden;border: none;height: 50px;"></iframe></div> <script type="text/javascript"> /*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } function loadScript() { var script = document.createElement('script'); script.async = true; script.src = scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload = ShopifyBuyInit; } function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'golden-moments-usa.myshopify.com', storefrontAccessToken: '7d944d2e69bddb24e7c33ba1395129bd', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '4840729411716', node: document.getElementById('product-component-1840729411716'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { "product": { "styles": { "product": { "@media (min-width: 601px)": { "max-width": "calc(25% - 20px)", "margin-left": "20px", "margin-bottom": "50px" }, "text-align": "left" }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "width": "100%", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" }, "price": { "font-family": "Lato, serif", "font-weight": "700", "font-size": "20px", "color": "#4d4d4d" }, "compareAt": { "font-family": "Lato, serif", "font-weight": "bold", "color": "#0b1c51" } }, "contents": { "img": false, "button": false, "buttonWithQuantity": false, "title": false, "options": false, "price": true }, "googleFonts": [ "Lato" ] }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": false, "button": true, "buttonWithQuantity": false }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#ed2a47" }, "background-color": "#0b1c51", ":focus": { "background-color": "#13308a" }, "border-radius": "8px", "padding-left": "30px", "padding-right": "30px" }, "quantityInput": { "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px" } }, "text": { "button": "Add to cart" } }, "cart": { "styles": { "button": { "font-family": "Lato, sans-serif", "font-size": "14px", "padding-top": "15px", "padding-bottom": "15px", "color": "#ffffff", ":hover": { "color": "#ffffff", "background-color": "#a81f33" }, "background-color": "#ed2a47", ":focus": { "background-color": "#13308a" }, "border-radius": "8px" } }, "text": { "total": "Subtotal" }, "contents": { "note": true } }, "toggle": { "styles": { "toggle": { "font-family": "Lato, sans-serif", "background-color": "#ed2a47", ":hover": { "background-color": "#a81f33" }, ":focus": { "background-color": "#13308a" } }, "count": { "font-size": "14px", "color": "#ffffff", ":hover": { "color": "#c8ad76" } }, "iconPath": { "fill": "#ffffff" } } } }, }); }); } })(); /*]]>*/ </script></div></div> Many thanks

I am trying to use a video background (Vimeo iframe) in a DIV, but I cannot get it to fill out the DIV as I want to save my life. I am working from an HTML template and I am an intermediate user at the most. here is a screen capture of what it is doing at the moment when I scale the browser window to check responsiveness: DIV scaling. (the video content almost looks like a still picture, but it's in fact a moving video) What I am trying to do is: The video should be locked to the bottom right corner of the DIV. The left OR the top side of the video should be cropped, depending on the aspect ratio of the DIV. Why am I not getting this? I first thought that it might not be such a big deal, but it just won't work. could anybody help me with this? here is the HTML of the DIV: <div class="imageblock__content videobg col-lg-6 col-md-4 pos-right" data-overlay="0"> <iframe src="https://player.vimeo.com/video/372864200?background=1" style="position:relative;right:0%;bottom:0%;width: 120%; overflow:hidden" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> <div class="background-image-holder"> <img alt="image" src="img/wedding-5.jpg"> </div> </div> and here are all the relevant CSS calls: .videobg .container, .videobg .background-image-holder { opacity: 0; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; } .videobg .background-image-holder { opacity: 0 !important; } .videobg.video-active .container { opacity: 1; } .videobg.video-active .loading-indicator { opacity: 0; visibility: hidden; } .videobg video { object-fit: cover; height: 100%; min-width: 100%; position: absolute; top: 0; z-index: 0 !important; left: 0; } @media all and (max-width: 1024px) { .videobg .background-image-holder, .videobg .container { opacity: 1 !important; } .videobg .loading-indicator { display: none; } .videobg video { display: none; } } .imageblock .imageblock__content { position: absolute; height: 100%; top: 0; z-index: 2; padding: 0; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .pos-right { right: 0; }

I created an iframe to display some text. I set the background color of the iframe to white. The iframe is inside a div element called "content." The colors work fine as long as I keep the height a certain number. (It's not clear what the exact number is, and it's probably dependent on other factors which I haven't figured out yet.) If I increase the height of the iframe beyond that, the background color of the area below the "cutoff" height takes on the same color as the enclosing div element. Here's the definition for div.content: div.content { position: absolute; top: 0; left: 250px; margin-left: 0; margin-right: 0; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; padding: 25px; background-color:#FFFBCF; } This is the iframe definition. It is enclosed in the content element: <iframe src="init_iframe.html" style="height:300px;width:560px;border:3px solid #black;" name="iframe_a"></iframe> I don't understand why it would do this. Anyone have an idea? Thanks.

BACKGROUND: I would like to embed a Matomo widget into a page, but I dare not embed it directly. For, to do so would require that I expose the authorization token that enables knowledgeable visitors of Matomo -- and coding in general -- the ability to view everything about my website that I am able to view. As I, myself, do not yet know what to do with everything that Matomo makes available (it appears endless), I certainly do not want to put it all into the hands of others willy-nilly. It is simply bad business. OBJECTIVE: Read the data into a PHP file, and load the result into the src attribute of an iframe. Below is sample code taken directly from the Matomo website. (The absence of the authorization token assumes that the superuser has given access to all users the right to view whatever they like. I do not wish to grant this privilege). SIMPLE URL https://www.nudge.online/_utilities/php/matomo/index.php?module=Widgetize&action=iframe&widget=1&moduleToWidgetize=Live&actionToWidgetize=getSimpleLastVisitCount&idSite=1&period=day&date=yesterday&disableLink=1&widget=1 EMBEDDING CODE <div id="widgetIframe"><iframe width="100%" height="350" src="https://www.nudge.online/_utilities/php/matomo/index.php?module=Widgetize&action=iframe&widget=1&moduleToWidgetize=Live&actionToWidgetize=getSimpleLastVisitCount&idSite=1&period=day&date=yesterday&disableLink=1&widget=1" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe></div> Obviously, there is no difference in the URLs. QUESTION: If an image can be created by a PHP file and then read into the src attribute of an image tag, surely it must then also be possible to read the HTML content of a PHP file into the src attribute of an iFrame. What is the necessary header argument required? I have tried both " header('Content-Type: text/html'); and header('Content-Type: text/plain'); Neither works! Or, am I just guessing. And, what I am trying to do simply does not work. Roddy

BACKGROUND: Recently I learned how to embed directly a Matomo widget into my website. Although there are several ways to make this happen, I am only able to achieve two of them at this time: one, gives all autonomous users access to all Matomo's reporting widgets and a large number of reporting methods; the other, exposes the superuser's authorization token that would leave a disastrous breach in database security. DILEMMA: Although I am able to retrieve the widget via CURL in an invisible PHP file, and consequently embed the widget's contents via the src attribute of an iframe, I am not able to do so with the same rich formatting that can be achieved when the same HTTP request is placed directly into the src attribute of the iframe. Either cURL is stripping away valuable information or the Browser is unable to process the information provided in the format provided. QUESTION: What must I do in order to get cURL to behave in a manner that produces information compatible with an ordinary web-browser? Roddy

Hello I'm facing a problem I cant really solve. I want to place a backlink in the shape of either a textlink or an img banner outside my own server. (for instance inside an iframe) I want to be able to track download impressions and referrer clicks. Can this be done with php or not? It seems technically not possible to place php on someone else's server. What would you recommend?

Hello & Thanks, I am trying to get an iframe with no borders without specifying exact width: These aren't working : <iframe seamless height="100%" width="100%" src="buttons_iframe.html" ></iframe> <iframe seamless="seamless" height="100%" width="100%" src="buttons_iframe.html" ></iframe> Pls, what is the proper way ? Thanks

Hello all, I'm trying to embed a public google calendar to my website using iframe, but this is not woorking in safari, chrome (private window) and i.e. The calendar is alrady set to public. This is the page: you can check it on multiple browsers. http://www.omcc03.net/testcinemanew/page.php?p=calendario How can I fix it? Thank you

I am new to web building and have built some pages. I have one that will build a tree view with JS and make 3 columns. However, when I link it via target="iframe_a", it has but 1 column and scrolling. I just need a pointer in the right direction

To favour the majority of our web traffic on mobile, the iframe implementation on this page - www.capewrathultra.com/results/ - has been wrapped in a div allowing it to behave with momentum based scrolling using -webkit-overflow-scrolling. Sadly this leaves desktop users with a double scroll bar, which I have given up trying to solve - whatever code I tweak within the iframe parameters it simply seems that I end back up with the status quo for best overall usability. Current code: <div style="-webkit-overflow-scrolling:touch; overflow-y: scroll; overflow: auto; height: 900px; width: 100%;"><iframe frameborder="0px" height="100%" scrolling="auto" seamless="" src="http://results.sportident.co.uk/home/multistage.html?multistageid=3870226f-3880-45e5-b63e-827847cf926f&mobile=true" width="100%"></iframe></div> Yes it's a bit hacky Anyone? Current (compromised with secondary [dud] scrollbar) desktop view: Apologies if this is actually for the CSS subforum?

Hi, I'm making a menu script with several options. With ul and li. The script works but I cant find a way to have a start up page or so selected. What happens now is that the last chosen page is showing in the browser unless < a href "somepage"> is used and targeted in the obtained name attribute. <ul class="slideuptabs"> <li><a href="http://localhost/MyLocation/home.php" target="lcell"><span>Home</span></a></li> <li><a href="http://localhost/MyLocation/home2.php" target="lcell"><span>Home2</span></a></li> <li><a href="http://localhost/MyLocation/home3.php" target="lcell"><span>Home3</span></a></li> <li><a href="http://localhost/MyLocation/home4.php" target="lcell"><span>Home4</span></a></li> <li><a href="http://localhost/MyLocation/home5.php" target="lcell"><span>Home5</span></a></li> <li><a href="http://localhost/MyLocation/home6.php" target="lcell"><span>Home6</span></a></li> </ul> <br><br> <table class = "maincell" border="2" cellpadding="2" cellspacing="2"> <tbody> <tr> <td class="lcell" name ="lcell"><iframe src=" " name="lcell" width="99%" height="99%" framebo rder="0"> </iframe> </td> <td class="rcell" name ="rcell"><iframe src=" " name="rcell" width="99%" height="99%" framebo rder="0"> </iframe><br> </td> </tr> </tbody> </table> Is there a solution do this at loading the site or frame page? Can it be done in html or should I use another language? .

<object type="text/html" data="http://www.anatoliajournal/atad" style="width:100%; height:100%; margin:0%;"> </object> <iframe src="http://www.anatoliajournal/atad"></iframe> Hello, I have a problem about iframes. When I try to embed "http://www.anatoliajournal.com/atad" code into my another website, it is not working. There is a blank div arising. Also I coded this site and there is no xframe stuff. Also I am coding the new site in localhost but I embed some of my another sites like " http://www.interdisciplinaryconference.org/" with the same code, and it is working in local host. These two sites are going to be in the same server but different domains. I dont know how to solve this. In this new site, there is a header and a footer. And I try to embed "http://www.anatoliajournal.com/atad" in a div inside body. Actually I am trying to create something like a roof site. These other sites are continuing to work under their own domains but also at the same time they can be reachable under roof site. Maybe this new site is going to be a transitional site till coding a integrated one. Can you give me a solution to embed "http://www.anatoliajournal.com/atad" into a div of an another site. Also I have tried <embed> codes and ajax. Thank you.

Hey, I'm a real rookie when it come's to web design so I've made only minor adjustments and customizations to ready Wordpress templates. Right now I'd need to find a way to bring content from another website to mine and the "usual" iframe way just won't cut it as it's not responsive and it just doesn't feel wise to play around with iframe's margin and other values. So what would be the right way to do this? For example, if I want the blue rating box from this site https://www.huom.fi/anne-kero ( box: https://jsfiddle.net/vkLwo4z1/ ) to another site, how should I do it? Is there a way to specify the iframe tag to display just this div on all devices? Thanks in advance.

Hi, I've embeded some maps & forms on my web site using <iframe> & noticed that they don't all show up in chrome & are unsupported in IE but look fine in firefox. I've read in this forum that using <iframe> is not the best way to embed stuff, but I haven't read what the alternatives are? Can anyone explain other ways of embeding that get better results in 'all' browsers? Thanks. old guy.

Hi, our platform sends notifications to users when they have something to action. we have the below structure: -- Page 1: a content management system portal which embeds specific applications via iframe. so on this page you have an iframe - Page 2: another page (the application page) where the content (actionable item) is located what I am looking for is if it is possible to create a link that will send the user to Page 1 and show Page 2 content within its iframe. bearing in mind that Page 2 URL is dynamic. (not a static page) we would be sending the that link to the user by email and also display it on the cms portal within a Notifications tile. Thanks in advance Antonio

Hi, I'm new to HTML and was wondering if anyone can point me in the right direction I have a wix site and have created my own form a HTML widget The form works OK and uses Google docs to record the information and mail back to me the contents I am trying to get the form when the submit button is pressed to continue to do as before but then to open another page on my wix site The snippet of code below works OK when run in Chrome including the re-direct but fail to re-direct when in my wix widget. Any help greatly appreciated </head> <body dir="ltr" class="ss-base-body"><meta itemprop="name" content="Contact form"> <script type="text/javascript">var submitted=false;</script> <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='http://google.co.uk';}"></iframe> <form action="https://docs.google.com/forms/d/1wBXOs4pWPLF9BKKZslPS4-VEQIaYDkaZNYLZTpZKKIg/formResponse" method="post" target="hidden_iframe" onsubmit="submitted=true;">

I am trying to get some help with iframe. I want to be able to open ad links within the same iframe. The clicking on a link generally works for me when I pull up craigslist webpage, but wants a new window to be opened when you click on a individual's ad post. Now I realize Craigslist has a policy for not wanting their pages to be redisplayed and maybe they have something in the webpage code that is doing this to me, but if I could get help anyways. Here is my code <body> <iframe height=400px width=500px src="http://flint.craigslist.org"></frame </body> Viewable and clickable links with iframe at http://jsfiddle.net/Edward_75/yqM7c/1/ but going to say this <iframe height=400px width=500px src="http://flint.craigslist.org/sss"></frame> Viewable and clickable at http://jsfiddle.net/Edward_75/heb74/3/ It will come with an error page asking you to open in new window. Also this being my first time here can someone explain why I cannot copy/paste? I am using IE ver.11

I have a page with 2 two iframes (80% / 20%) I want a button (where?) to dynamicaly hide the right iframe and set te left to 100% How do i do that? Suggestions are very welcome! This is file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="nl"><head><title>Titel</title> <style> .menu { float:left; width:80%; height:100%; } .mainContent { float:left; width:20%; height:100%; } .toolbar=no; .menubar=no; </style> </head><body> <iframe class="menu" src="http:/testpage.htm" frameborder="0"></iframe> <iframe class="mainContent" src="./helpinfo.htm" frameborder="0"></iframe> </body></html>

I am trying to use a simple radio button in my main page to show and hide divs by class which are inside an iframe. Here are the relevant snippets of code: In the "index.html" : <head> <script> function setlanguage(language) { ..........will save myself the embarrassment of showing you my attempts at coding this................. } </script> </head> <body> <input id="english" type="radio" checked onclick="setlanguage('EN')"> <input id="deutsch" type="radio" onclick="setlanguage('DE')"> <input id="francais" type="radio" onclick="setlanguage('FR')"> <input id="italiano" type="radio" onclick="setlanguage('IT')"> <iframe src="home.html"></iframe> </body> Example from "inside-the-iframe.html" : <div class="EN">Hello world</div> <div class="DE">Guten Tag</div> <div class="FR">Bonjour</div> <div class="IT">Ciao Rigazzi</div> Should be dead easy for you guys... please help!

I created a page that when you click on the link to the left the content of the new payre is shown in the iframe in the main content area. just before the content is loaded the iframe area flashes white and then the content is shown ok. I there something wrong with my coding? Have I overlooked something or is this just how the page gets loaded? I would like to have a smooth transition into the change of content. If you need to see my website to understand what I am trying to explain the site is snsg.us Thank you for any help Paul

i simply cant believe it. i am having a html coding issue and i cant bloody use <html> tags in this post...everything comes out blank!!!

Hi guys! I just went through difficult maintenance for a website project involving iframes with the necessity of short, not embedded initial content. I was using @srcdoc and it already was difficult enough as syntax rules. Then I changed mime type for the pages, converting them into proper XHTML, and the result was confusing and terrible: Syntax adjustments for the "markup model" inside the attribute's value made me double the length of the value. It is not checked by validator, so predicting errors is difficult. It relies on the support of @seamless in order to match the design of the page, or otherwise it needs style declaration/stylesheet embedding which make it longer and impact on page loading while using several iframes in the page. Anyway using both could lead to conflicts during the (future, eventual) transition phase when @seamless is implemented on some UAs but not all and/or we'll have to face both support and backward compatibility. inserting semantic markup is too long because it ends up being treated as external document, so there must me a link reference to the main argument which is pointless (IMO), as the content is actually part of the page containing the main argument itself. XML serialization is wrong also in those browsers which currently support @srcdoc: Firefox always parses it as HTML, while the other ones complete the srcdoc document with tags missing (following the spec rules about tag omission in text/html) also where this is not requested. @srcdoc syntax is difficult to find, read, parse and serialize for any client different from browsers, i.e. search engines, data mining tools, scripts which fetch documents, and even for the authors themselves which have to write proper scripts for retrieving data (perhaps from databases) and insert them in a so particular position (with a special syntax inside an attribute) it is theoretically confusing because it mixes elements and attributes. It forces authors to write unmaintainable document fragments, also denying them the use of common editing aids like indentation and markup highlighting. These reasons and many more make iframe@srcdoc practically unusable now and in the near future. It is not a case that in webpages fetched by webdevdata as of october 2013 no use of @srcdoc has ever been made. And I suppose neither is a case that iframe@srcdoc is the very only feature making use of a "markup model" inside an attribute value. Now, iframe is not a void element: the restrictions on content, different between HTML (content model: text) and XHTML (content model: empty) documents, have been introduced with HTML5. Has anyone ever thought that the very same results of @srcdoc, with better, richer and more practical result using the native <iframe>'s content?

HI all, I want to load urls like http://google.com in IFRAME. But iframe does not load urls which returns "X-Frame Options Deny" in the header. So, http://google.com not loading iframe.Code:<iframe id="fm" src="http://www.facebook.com" frameborder="0" width="400" height="500" scrolling="no" ></iframe>IS there any way to loaded the urls returns "X-Frame Options Deny" in the header?Please help me ASAP.Thanks in advance....

I am going to design a webpage, which contains <div>(s) that allow users to submit their (X)HTML with CSS, and being inserted into those <div>(s). I understand it will suffer from XSS seriously, so I will use HTML Purifier to sanitise the (X)HTML and CSS. For instance, I will definitely not allow <script>, <iframe>, and external resources. But I wish to allow almost all other tags and CSS attributes. Here comes the question. I wish to keep client elements (visually) inside the <div>(s). I have tried a partial solution, by using position: absolute; and overflow: hidden;, as follow: <html><head><style>div#jail { position: absolute; overflow: hidden; border: 1px dotted red; height: 200%; width: 50%; left: 25%; top: 25%;}/* All client's CSS is ensured prefixed with div#jail */div#jail .client_code { margin: 0; position: absolute; top: -8px; z-index: 1000;}</style></head><body><div id="jail"> <p class="client_code">elements being jailed</p></div></body></html>The effect of the codes above is as follow: The red dotted line is the "Jail". The purpose is to make any HTML codes with any CSS (prefixed with div#jail) to visually keep inside the box. As shown above, the line of text tried to move out of the box. However, because of overflow: hidden, it is just clipped. So nothing could escape the "Jail". This is good. So far, I have successfully jailed <p> inside div#jail for most kinds of client's HTML elements and CSS, except when user uses position: fixed;. div#jail .client_code { position: fixed; top: 0px;}The following is the screen capture, which the "jail" failed: As shown above, if the position: fixed CSS is applied to the jailed elements, the result is that the line of text can be shown outside the box - i call it a breakthrough of the jail. This is not good. So, my question is, how to ensure everything are visually "jailed" inside the box? If position: fixed is the only CSS which can cause this breakthrough, i can just prohibit position: fixed and the Jail would be enforced. If there are any other ideas/design to achieve this, any solutions are welcomed! Thanks a lot!