Generally I am against the use of iframes, but it solved a particular problem of mine.
The thing is that I have a tinyMCE-editor at a webpage. After the user have made the content using this editor the content is sent as HTML to a web application. This content is then displayed in a div. Thing is that tinyMCE often add styles with position absolute and things that break with the rest of the web applicaiton.
When testing I found out that the new HTML 5 iframe srcdoc="<p>Some HTML</p>" and seamless="true" was perfect for my situation. It looked seamless and the contents style and my style was intact. Sadly I now see that the HTML5 srcdoc attribute is not yet supported by Android (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdoc yields different result in chrome and android browser).
So the question is: Is there any alternative to the iframe srcdoc which will preserve all style of the received content and contain it in a div?
You can write to the document of an iframe like this:
const html = '<body>foo</body>';
const iframeDocument = document.querySelector('iframe#foo').contentDocument;
const content = `<html>${html} </html>`;
iframeDocument.open('text/html', 'replace');
iframeDocument.write(content);
iframeDocument.close();
As suggested by eicto by comment, jquery could be used to fill an iframe at the ready-event. In order to adjust the height of the iframe to the height of the content some dirty hacks had to be applied, but the code I ended up using is more or less:
HTML
<!-- IMPORTANT! Do not add src or srcdoc -->
<!-- NOTICE! Add border:none to get a more "seamless" integration -->
<iframe style="border:none" scrolling="no" id="myIframe">
Iframes not supported on your device
</iframe>
JS
// Wait until iFrame is ready (body is then available)
$('#myIframe').ready(function() {
var externalHtml = '<p>Hello World!</p>';
// Find the body of the iframe and set its HTML
// Add a wrapping div for height hack
// Set min-width on wrapping div in order to get real height afterwords
$('#myIframe').contents().find('body')
.html('<div id="iframeContent" style="min-width:'+$('body').width()+'px">'
+externalHtml
+'</div>'
);
// Let the CSS load before getting height
setTimeout(function() {
// Set the height of the iframe to the height of the content
$('#myIframe').css('height',
$('#myIframe').contents()
.find('#iframeContent').height() + 'px'
);
},50);
});
Use the new Data URI Scheme.
Example:
var content = "<html></html>";document.getElementById("my_iframe_id").src = "data:text/html;charset=UTF-8," + content;
Related
I have a website, and I need to add an inner page from the website into another project hosted in Squarespace.
I added the section as an iframe like below
<iframe src="https://stackoverflow.com/" name="Stack" scrolling="No" height="500px" width="100%" style="border: none;"></iframe>
the stack overflow header has to hide in that section, I have tried to add in CSS and inline CSS, it's not working.
.top-bar js-top-bar top-bar__network {
display: none !important;
}
Any possible way?
Assuming that:
the two project websites are hosted on different domains and
that you are not able to set the appropriate CORS header on the iframed ("child") website and
you are able to add JavaScript to the child website,
then you could add the following script at the end of the body element of the child website:
<script>
(function() {
if (window.self !== window.top) {
document.getElementById("myHeader").style.display = "none";
}
})();
</script>
In the code above, you would replace myHeader with the id of the element you want to hide when the site is iframed. What that script does is it detects whether the site is iframed and, if so, it adds in inline style to the header in order to hide it. Again, that is running within the child website, not the "parent" website with the iframe embedded in it.
However, if the two websites are hosted on the same domain, then you can access the iframe via JavaScript and add CSS and/or inline styles from the "parent" website. You can also do that if the appropriate CORS header is set.
I wish to change img tag inside some Page template element to another tag. It's necessary to use parallax effect for each image on page (without specific class or created in CMS). Because Images cannot be styled, I decided to replace img tag with another. I can do this using JS, so poor browser won't be affected, but decided to ask could it be done by PHP and silverstripe?
In response to Conny Nyman's text. There an example JS code.
var el = document.querySelectorAll('.Paralax'); // Obtain images to which should been paralax effect apply
for (i = 0; i < el.length; ++i) {
// Create more elements, for example parent of div created bellow, so browser will properly calculates height - or use getComputedElementStyle from image element and apply result to nel
var nel = document.createElement('div');
nel.style.background = 'url("' + el[i].getAttribute('src') + '")';
el[i].parentNode.insertBefore(nel, el[i]);
el[i].parentNode.removeChild(el[i]);
}
Above code will do this, by using JS. I realize I need to not use JS, but add server support. Because Page was generated by many templates and I need allow to add paralax image from CMS, I need a way to add global template for all img tag, which checks only img have Paralax class.
I have this code of an iframe displaying a google docs document:
<div itemprop="description" class="col-xs-12 no-h-padding" id="article_desc" style="margin:0 auto; width:90%; float:none;">
<iframe src="https://docs.google.com/viewer?url=http://example.com/docs/1.pdf&hl=ar&embedded=true" scrolling="no"></iframe>
</div>
The iFrame works great and display the following iFrame:
Now i want to change the grey background as seen in the picture above into a white background color, i've been searching for a solution and i come up with this, but it's not working, the background turned white (with my custom css) but google docs didn't work and it displayed a message telling me "something went wrong" inside of the iFrame.
Does anybody know how can i change the grey background color ?
EDIT
It works on Google Chrome and Opera but not on Firefox nor Safari.
I can't say for certain whether this is the issue or not, but, because it's appearing differently in different browsers, I'm inclined to believe it's a matter of CSS normalizing/resetting. This answer has a script for doing that, and several more are in the comments, so I recommend checking it out.
Google docs is currently happy to serve published documents via CORS requests.
By placing the folowing script tag at the bottom of your <body>, all your google docs iframes will be replaced by plain divs containing your documents.
<script>
// get all iframes that were parsed before this tag
var iframes = document.getElementsByTagName("iframe");
for (let i = 0; i < iframes.length; i++) {
var url = iframes[i].getAttribute("src");
if (url.startsWith("https://docs.google.com/document/d/")) {
// create div and replace iframe
let d = document.createElement('div');
d.classList.add("embedded-doc"); // optional
iframes[i].parentElement.replaceChild(d, iframes[i]);
// CORS request
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
// display response
d.innerHTML = xhr.responseText;
};
xhr.send();
}
}
</script>
No more iframe restrictions. CSS will work as expected.
Following points can be noted in this scenario regarding styling the iframes:
You cannot style the iframe loaded from another domain (Cross domain).
A work around is there to style only the iframe block (Not iframe content) by giving the inline CSS to the iframe tag used.
You can find a hack for it by first fetching the content in your domain/server and then serving the iframe from there to make it from the same domain and hence stylable using the regular CSS and javascript.
Following link has more details and script examples which can be used in this scenario: How to apply CSS to iframe?
On the website I am currently working on I have a div that loads slowly causing the page to load slowly but also jump as not all the positions elements load until after this slow div does. I cannot control the contents of this div as the content from the div comes from an external source.
So I was wondering if I could move the contents of this div to the bottom of my code so that it loads after the rest of my page whilst still keeping the position of the content on the same place on the webpage? Similar to what people do with some java script code.
Like Sergey said do something like this
javascript in the head
window.onLoad = function() { switchDivs(); }
HTML above where you want the content
<div id="whereYouWantIt"></div>
More HTML for the rest of your page
<div id="contentIsInHere"></div>
javascript here for function that switches the content around. Optionally call an external script here that contains this function.
<script>
function switchDivs() {
document.getElementById("whereYouWantIt").innerHTML = document.getElementById("contentIsInHere").innerHTML;
document.getElementById("contentIsInHere").innerHTML = "";
document.getElementById("whereYouWantIt").style.display = "inline";
}
</script>
</body>
CSS
#whereYouWantIt {
display:none;
other styles ...
}
#contentIsInHere {
display:none;
no other styles needed
}
You can use CSS to position the div and have it in the end. Or javascript is actually is good idea, load the content in a window.onload() function.
You can locate 2 divs - one where it should be and second in the bottom of page. Both of elements should have initially display none. After page will be loaded copy inner content of "pseudo" div by using JavaScript to the div you needed and make display block for this.
I'm using the facebook like button on my site, via an iframe.
Now you have to specify a width of the iframe. Due to various languages of the like button, this means that I have to set the width to at least 70px.
Now i want the like button to be aligned to the far right of my site, now i can do this by adding "text-align:right" in the css style of the iframe. The iframe shows on the right, but not all the way on the right.
This happens because of the iframe width, its 70px, and for example the english like button is only 55px.
Now what i want: To align the actual content of the iframe to the right of the actual iframe.
http://pastehtml.com/view/1dnwtbh.html
Here i have build an example. Its aligned on the right of the div ive build, but because the iframe is larger than the actual like button, its not perfectly aligned to the right. I want to like button to be aligned to the right in the iframe.
I hope you guys can help
css rules only apply to the iframe element, not the contents of the iframe, because it is another webpage entirely.
You 'might' be able to use javascript to add a css stylesheet to the iframe page with:
var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['frame1'].document.head.appendChild(cssLink);
But I'm not sure if that will work on all browsers.
Your best bet is to call the page with AJAX.
That way you can modify the contents of the page before you display it
An example jquery AJAX function might look like this:
$.ajax({
type: "GET",
url: "facebookURL",
dataType: "html",
success: function(html) {
processData(html);
}
});
function processData(fbData) {
$('#injectFBLikeHere').html(function() {
return $(fbData).find('#LikePluginPagelet').html();
});
}
Note I haven't test this, only use it as a starting point or a guide
Modifying the contents of an iFrame is typically impossible by modern web standards : http://en.wikipedia.org/wiki/Cross-site_scripting
Because you cannot determine the width of the like button inside of the iframe, you can't resize the iframe to the minimum width to be nested on the right.
The only way I can think of is resizing the iframe, but as you said, you need it to support multiple languages, which I guess then if you used javascript to detect the user's language ( JavaScript for detecting browser language preference ). You might be able to manually style the like button's iframe width depending on the language. I can't think of any automated way to do this, due to cross site scripting.
Here is what to do.
Insert a DIV called #like before you tag, then Put your Facebook code inside as shown below
<div id="like">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/pages/HUE-Architecture/122612441133152" layout="box_count"></fb:like>
</div>
<!-- End Like
Now create the #like CSS that you applied to the above DIV as shown below and adjust as needed.
/* CSS for Facebook like*/
#like {
position: fixed;
top: 300px;
right: -20px;
float: right;
height: auto;
width: 130px;
}
Note: remove any previous CSS that you applied to the i-frame so it doesn't conflict with this one.
Maybe this will work for you:
when you generate code here, set the width to 0.
Like this? http://d.pr/Cbkd
If so, here's what I did via Firebug
.connect_widget_number_cloud,
.connect_widget_connect_button {float: right !important;}
I also changed the iframe width to something like 60px.