Hallo all: I need to insert a html string in a iframe as shown below:
....
var html = "<html><head><title>Titolo</title></head><body><p>body</p></body></html>"
jQuery('#popolaIframe').click(function() {
parent.$("#indexIframe")[0].documentElement.innerHTML = html;
});
Is there a way to achieve this?
var html = "<html><head><title>Titolo</title></head><body><p>body</p></body></html>"
jQuery('#popolaIframe').click(function() {
var doc = parent.$("#indexIframe")[0].documentElement;
doc.open();
doc.write(html);
doc.close();
});
Does that code you posted work? If not, it's probably because browsers disallow modification of iframe content for security reasons.
Looks like you can get a refrence to the body so I don't see why not:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument
You have lost 1 level, you need modify innerHtml of body, but not document:
document.body.innerHTML = bla-bla
You cannot insert into an iframe unless you remove() the iframe and use 'append(html)'. You can insert it inside iframes body like
$('body',parent.$("#indexIframe")[0].contentWindow.document).html(html)
Alternitevely if not sure about the parent element you could do that:
var doc = $.find("#myIframe")[0].contentWindow.document; //that will look in the whole dom though
doc.open();
doc.write(html);
At least this did the job in my case :)
Related
I want to use HTML format in QToolButton. for example in this picture , I should create QToolButton in "Sara" and "Online".
Here is my code:
viewControl=new QToolButton(this);
QString labelText = "<P><b><i><FONT COLOR='#fff'>";
labelText .append("Sara");
labelText .append("</i></b></P></br>");
labelText .append("online");
viewControl->setText(labelText);
But it seems QToolButton cannot define HTML format.
How to resolve it?
I also used layout in QToolButton but it show me empty box.
QVBoxLayout *titleLayout = new QVBoxLayout();
QLabel *nameLabel = new QLabel("Name");
QLabel *onlineLabel = new QLabel ("online");
titleLayout->addWidget(nameLabel);
titleLayout->addWidget(onlineLabel);
viewControl->setLayout(titleLayout);
According to the answer mentioned here
I don't think this is possible without subclassing QToolButton and overriding the paintEvent. but you can try something like this:
toolButton->setStyleSheet("font-weight: Italic");
I know you can add CSS in an HTML code, but what I want to know is that is it possible to do the opposite? Because there's something I want to add a class to, but it only has a custom CSS box.
EDIT:
<div class="thing2"></div>
Fiddle - What I wanna try to do here is to make the ".thing2" appear by only putting codes on the css box and not adding the code above in the html box. Just wanted to see if it's even possible.
you can use a function (javascript) like
function myfunc()
{
var something = document.getElementById("ElementID");
something.className = something.className + " newclass";
}
then just call it
No, but you can do it using JavaScript:
var element = document.getElementById("elementId");
element.className = element.className + " newclass";
Hope this helps spark some ideas!
This w3schools page mentions the HTML DOM createElement() Method. For example, you can create a button by
var btn=document.createElement("BUTTON");
However, how can I add ID/class to this button? And what else can I do with it?
One way with Javascript, is by using setAttribute:
element.setAttribute(name, value);
Example:
var btn=document.createElement("BUTTON");
btn.setAttribute("id", "btn_id");
btn.setAttribute("class", "btn_class");
btn.setAttribute("width", "250px");
btn.setAttribute("data-comma-delimited-array", "one,two,three,four");
btn.setAttribute("anything-random", document.getElementsByTagName("img").length);
The advantage of this way is that you can assign arbitrary values to arbitrary names.
https://developer.mozilla.org/en-US/docs/Web/API/element.setAttribute
You could assign to its property:
var btn=document.createElement("BUTTON");
btn.id = 'btn_id';
btn.className = 'btn_class';
I've created a page with an empty iframe on it. I can then select the iframe document and navigate to it's body:
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentDocument || iframe.contentWindow.document;
var body = doc.body;
console.log("Body is", body);
In firefox and chrome this gives me the body object. In IE10 it gives me null.
Here is a Jsbin demonstrating the issue. Open up the JS, Console, Output panels and click "Run With JS".
Two questions:
How do I get access to the iframe's body in a cross-browser manner?
Which is the correct "to-spec" behavior?
I had a similar problem earlier today. It seems IE, at least 9 and 10, doesn't create the iframe body correctly (when I used the developer tools I was able to see a body tag inside the iframe, but like you wasn't able to call it), when there's no specified src. It gives you null cause it doesn't exist.
The answer, to whether there is a cross browser manner to access the iframe's body, is no. BUT, you could use a workaround. First, check if the iframe body exist, if not, then create it.
Your code would look like this:
var iframe = document.getElementsByTagName('iframe')[0];
var doc = iframe.contentDocument || iframe.contentWindow.document;
// The workaround
if (doc.body == null) { // null in IE
doc.write("<body></body>");
}
var body = doc.body;
console.log("Body is", body);
Source: http://forums.asp.net/t/1686774.aspx/1
This code is working for me cross-browser:
var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
var body=doc.getElementByTagName("body")[0];
Over a year later but I believe the solution was to call
doc.open()
//make any modifications
doc.close()
//at this point doc.body will not be null
This made things work in a fairly consistent manner cross browser
I have 5 a elements that I need to inject with additional span , instead of creating new Element 5 times how can I do this only once ? I tried
var holders= $$('.holders');
holders.each(function (el){
var addspan = new Element('span', {
'class': 'over'
});
el.inject(addspan , 'top');
});
but it does not work
any help is appreciated , thank you!
Injection works the other way around; it injects an element into another one. Try reversing addspan and el.
Another option would be to use the adopt function, which might be more intuitively meant to have an element adopt another one.
Like akaIDIOT already mentioned, you have to swap addspan and el when using the inject method. To save a line of code, you can chain the inject method with the new element like this:
var holders= $$('.holders');
holders.each(function(el) {
var addspan = new Element('span', {
'class': 'over'
}).inject(el, 'top');
});