I am trying to bind the iFrame from a API response to div with id. It is not working in IE. I am able to bind the iframe, but iframe is not displaying the raw HTML:
.html file
<div id="div" ></div>
.ts file
theIframe = "<iframe srcdoc=\"<!DOCTYPE html>\n<html>\n <head>\n <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>\n <width=\"100%\" height=\"600px\" scrolling=\"no\" frameborder=\"0\"></iframe>"
document.getElementById('div').innerHTML = theIframe;
A working and better way would be to write to the IFRAME via JS:
<div id="target"></div>
<script>
document.getElementById("target").innerHTML = "<iframe id=\"my-frame\" src=\"about:blank\"></iframe>";
var frame = document.getElementById("my-frame");
var fdoc = frame.contentDocument;
fdoc.write("<!doctype html><head></head><body>Here is some content.</body></html>");
</script>
Please note that this will work in Firefox and Chrome, Internet Explorer will most likely prompt an ActiveX security popup that would need to be accepted by the user.
Using srcdoc
You don't need to (better said: you are not allowed to) to escape the HTML characters in srcdoc as this will tell the browser to render the characters "<" or ">" rather than interpreting them as begin and end of a tag. You will need to decode/unescape them before (I used Wladimir's answer from another SO to handle the decoding) and then make sure that you convert the quotes to single quotes. Also make sure that the response of the API returns proper HTML as what you posted in your comment is incomplete and the double quote sign is missing in the srcdoc tag.
function htmlDecode(input) {
var doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
}
let div = document.getElementById("div");
let response = '<!DOCTYPE html>\n<html>\n <head>\n <script src="code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>\n<head><body>Some content.</body><html>';
div.innerHTML = "<iframe src=\"about:blank\" srcdoc=\"" + htmlDecode(response).replace(/"/g, "'") +"\"></iframe>";
<div id="div">
</div>
Related
I want to get the source code of HTML document which is inside an HTML tag which is generated after some JavaScript and store it in a variable. Here, the HTML tag is <iframe> and it contains a variable kind of something that looks like #document and when I expand this, I get an HTML document which looks something like <!DOCTYPE html> <html>...</html>
To summarize:
<iframe src="https://www.XXXXXX.com/" allow="autoplay; fullscreen" frameborder="no" scrolling="no" allowfullscreen="yes" style="width: 100%; height: 100%;">
#document
<!DOCTYPE html>
<html>...</html> // a whole new HTML document
</iframe>
I want to store all the content of this HTML document as a string in python
What I have done:
driver.find_element_by_xpath('/path/to/iframe/tag').get_attribute('innerHTML')
but, this just returns an empty string. Also, I have checked if it is working with BeautifulSoup
html = driver.execute_script("return document.body.innerHTML")
soup = BeautifulSoup(html, 'html5lib')
print(soup.prettify())
but, this also isn't working
NOTE: I run these test only after the script is executed, also, I guess the problem seems to be with the #document thing
You can't get iframe content by using innerHTML, as you can't do it even with javascript inside a self made html document, like so:
function Button(){
var iframe = document.getElementsByTagName("iframe")[0];
var p = document.getElementsByTagName("p")[0];
p.innerHTML = "Result of iframe.innerHTML: " + iframe.innerHTML;
}
<iframe src="https://bing.com/"></iframe>
<br>
<button onclick="Button();">Click me to alert innerHTML</button>
<p></p>
Instead, you want to redirect to iframe's src and get html content.
Didn't test the following code but i hope it helps you.
driver = webdriver.Firefox(executable_path=firefox_path, firefox_profile=firefox_profile)
driver.get('https://example.com/')
documentText = driver.page_source
soup = BeautifulSoup(documentText)
iframe_source = soup.find('iframe')['src']
driver.get(iframe_source)
documentText = driver.page_source
soup = BeautifulSoup(documentText)
html = soup.find('html')
print(html.content)
Why would you want a HTML document in an html document? I do think this isn't possible, but you could try putting an HTLM document on a different site and than by using <iframe src="www.html-content.com"></iframe>
The answer is simple,
I just switched from current frame to the frame of <iframe> element
Code:
driver.switch_to.default_content()
frame = driver.find_element_by_xpath('//iframe')
driver.switch_to.frame(frame)
I have made a textbox and an iframe in the same html. I want to load the 'html' rendered from textbox into html. I am using javascript button click event, but nothing is getting rendered. Pls help, I cant find where I am making mistake!
HTML:
<button onClick="convert()">Run</button>
<textarea id="mycode">
Hello World!
</textarea>
<iframe id="display"></iframe>
Javascript:
function convert()
{
var x = document.getElementById('mycode').value;
document.getElementById('display').innerHTML = x;
}
Can someone help, what's wrong ?
Try setting src of iframe to data URI representation of textarea value x
function convert()
{
var x = document.getElementById('mycode').value;
document.getElementById('display').src = "data:text/plain," + x;
}
<button onClick="convert()">Run</button>
<textarea id="mycode">
Hello World!
</textarea>
<iframe id="display"></iframe>
Just replace
document.getElementById('display').innerHTML = x;
with
document.getElementById('display').contentWindow.document.body.innerHTML = x
You can't manipulate an iframe with Javascript (or jQuery) because the iframe is essentially a separate webpage. This is for security purposes, to prevent one website from embedding a malicious script into an iframe that can target the host page. There is no way around it, as far as I know. Generally it's not good practice to use iframes.
I was browsing the answers for the same task. Well the accepted answer does help a little but the main task is to render "HTML". It works using the srcdoc attribute of the iframe tag.
function convert()
{
var x = document.getElementById('mycode').value;
document.getElementById('display').srcdoc = x;
}
<button onClick="convert()">Run</button>
<textarea id="mycode">
<!-- Comment is not rendered -->
Hello World!
</textarea>
<iframe id="display"></iframe>
Hi everyone,
here am trying to display the source code of a particular div by onclick
javascript function. But the result am getting is , when i click on the div, am seeing the
whole source code though am trying to make only the particular source code of a div to get
displayed. anyone please highlight me what am doing wrong here..! and what to do to make
it work in the way its expected.
<html>
<head>
<title></title>
<script type="text/javascript">
function viewsource(){
var oldHTML = document.getElementById('para').innerHTML;
var newHTML = "" + oldHTML + "";
var newHTML = newHTML.replace(/</g,"<");
var newHTML = newHTML.replace(/>/g,">");
var newHTML = newHTML.replace(/\t/g," ");
document.getElementById('para').innerHTML = newHTML;
}
</script>
</head>
<body>
<p id='para'><strong>This is my <span style="border: 1px solid #ccc;">test text</span> to check if it works</strong></p>
<input type='button' onclick='viewsource()' value='View Source'/>
</body>
</html>
Additional notes:
In the above code, when the button is clicked, the paragraph tag with the id of para will display...but it shows its css too. I want to display only the html tag without the css style attribute.
I don't want the content using innerHTML but i want the whole div including with the div id.(eg.)<div id='softros'><img src='/images/bgrade.jpg' /></div>
have you considered to just use inside your java script handler :
document.getElementById(YOUR_DIV_ID_GOES_HERE).innerHTML
You can get the HTML of the div using .innerHTML or .outerHTML but you need the encode it before you can display it. Otherwise the html gets renderd by the browser. In PHP you could use htmlencode javascript has no function for this but you could use this htmlencode.
I make a jQuery get call to fetch a html fragment and do some processing based on that data
$.get($('.more a').attr('href'), function (data) {
var $data = $(data);
// other code using $data
});
Here, 'data' is
<div class="topDiv"> Data goes here </div>
But $data shows as
<div class="topDiv"> </div>
Only the html tags are shown, while the text inside is not. IE has the same problem(?). However, Firefox parse it correctly.
When I alert($(data).html()) , Firefox shows the alert with proper html while chrome and IE show it with the missing text.
Since I am running my project on localhost I am unable to provide a URL for the html fragment.I am using an asp.net ashx handler to provide the html fragment. Basically, when we post a request to the handler, it returns a html fragment based on a query string parameter passed to it.
String content = "<html> <head> </head> <body>"+
"<div class="topDiv"> Data goes here </div>"+
"</body></html>";
context.Response.ContentType = "text/html";
context.Response.Write(content);
Resolved
As mentioned in the answers, the 'html' fragment was not well formed. Firefox 3 seemed to accept it while Firefox 4, Chrome and IE did not.
I suspect it's because <div>text</div> isn't really a valid html document in itself. IIRC, divs are only supposed to contain block level elements. Text should be inside p, a, etc. So IE and Chrome are killing the text according to DOM standards, Firefox is letting it fly. Tell jQuery the dataType of what you're getting is "text" instead, then insert the content into your div using html(textData) instead.
EG:
$.ajax($('.more a').attr('href'), {
dataType: 'text'
}).done(text) {
$('container selector').html(text);
});
How did this:
String content = "<html> <head> </head> <body>"+
"<div class="topDiv"> Data goes here </div>"+
"</body></html>";
ever compile with the unescaped quotes? If you fixed this, you should be rocking and rolling.
I am trying to replace a text in javascript using a regular expression like following [example of what I am trying to do]:
<html><head></head>
<body>
<div id="div1">This is Old</div>
<script>
var message = "Hi";
var str = document.getElementById("div1").innerHTML;
var newstr = str.replace(/Old/g, "<div onclick='say(\""+message+"\");'>New</div>");
document.getElementById("div1").innerHTML = newstr;
function say(message)
{
alert(message);
}
</script>
</body>
</html>
This is a sample code of what I am trying to do in a large application. Our script is injected in thrid party html pages, so we dont have control over the html.
If you run this code, you will see that the text appears to be broken and if you just remove the "Old" from the title tag it will work fine. I cannot change the html, so I have to modify the script to handle this.
Is there a way I can put some regular express that can bypass the replacement of the text in case if it occurs in between "<" and ">"?
or some other way to solve this.
I cannot use DOM to do the replacement, as it crashed the page when there were too much text, I am doing full page text replacement.
Thanks in advance for your help :)
EDIT: Changed the code to make it working :)
I might be unrelated but, you may need to replace message variable inside the replaced text. Since you declared message variable locally, it will not be available outside.
EDIT:
For your question, you can do that with RegEx but it will be quite hard. If I got time I might work on it a bit.
EDIT 2:
Try this one, it makes sure the Old is not in a tag.
>[^><]*(Old)[^<>]*<
EDIT 3:
This works file too, starting > is not necassary
[^><]*(Old)[^<>]*<
EDIT 4:
<html><head></head>
<body>
<div id="div1">This is Old</div>
<script>
var message = "Hi";
var str = document.getElementById("div1").innerHTML;
var newstr = str.replace(/([^><]*)Old([^<>]*<)/g, "$1<div onclick='say(\""+message+"\");'>New</div>$2");
document.getElementById("div1").innerHTML = newstr;
function say(message)
{
alert(message);
}
</script>
</body>
</html>
Make your replace:
str.replace(/(>[^<]*)Old/g, "$1<div onclick='say(\"message\");'>New</div>");
Which basically means "Old not in an HTML tag"
Wouldn't it be simpler to assign id to <a> element instead and then run the same replace() on it's innerHTML (which shouldn't contain the tag's title attribute):
<html><head></head>
<body>
<div id="div1"><a id="link" href="#" title="This is Old">This is Old</a></div>
<script>
var message = "Hi";
var str = document.getElementById("link").innerHTML;
var newstr = str.replace(/Old/g, "<div onclick='say(\"message\");'>New</div>");
document.getElementById("link").innerHTML = newstr;
function say(message)
{
alert(message);
}
</script>
</body>
</html>