Loading iframe with content in textbox - javascript

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>

Related

Unable to display iframe body with srcdoc attribute in Internet Explorer

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>

How to get the html document contained inside an HTML tag using selenium in python

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)

Editor HTML and CSS in Real Time that execute JAVASCRIPT too

I did a script that help me to make a web page in realtime, I can put html and css and everything work well, but I can't execute javascript because I am using a editor based in string, can you help me to find a way to execute javascript in this editor?
Pay attention, with this simple script you can put a whole page's code with CSS and HTML without escape and you'll see a formated page, but JAVASCRIPT don't work in this script.
function html() {
var str = document.getElementById("go").value;
document.getElementById("show").innerHTML = str;
}
<p id="show"></p>
<textarea id="go" onKeyUp="html()" width="100%" cols="50" rows="10">
</textarea>
UPDATE, at last, I got, this editor execute javascript too! Now I can build a whole page with javascript inside, thank you for the answers!!!
$(document).ready(function(){
$('#editor').keyup(function(){
$('#page').html($(this).val());
});
});
<p id="page"></p>
<textarea id="editor" width="100%" cols="50" rows="10" placeholder="you can use html, css and javascript here..."></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You are adding everything in a paragraph tag. That is why nothing in script tags are working. You might want to append everything in the body tag:
function html() {
var str = document.getElementById("go").value;
document.getElementsByTagName("body")[0].innerHTML = str;
}
Can you clarify what you mean by "find a way to execute javascript in this editor?" What are you desired results?
Javascript won't run automatically like that, u need eval() to run it, I would suggest something like this:
Although it increases the security risk but it is one of the only ways to do it.
function html1() {
var str1 = document.getElementById("go1").value;
document.getElementById("show1").innerHTML = str1;
}
function html2() {
var str2 = document.getElementById("go2").value;
document.getElementById("show2").innerHTML = eval(str2);
}
<p id="show1"></p>
<p id="show2"></p>
<textarea id="go1" onKeyUp="html1()" width="100%" cols="50" rows="10"> </textarea>
<textarea id="go2" width="100%" cols="50" rows="10"> </textarea>
<br><button onclick="html2()">Try it</button>

How to print one specific Javascript variable in HTML?

I want to ask how I can print a Javascript variable in HTML form (e.g. output it on the screen)?
Here is my JS code:
<script type="text/javascript">
var howLongIsThis = myPlayer.duration();
</script>
This var howLongIsThis = myPlayer.duration(); is Jquery variable!
So how i can show this value in HTML page?
Set it to be the innerHTML or value of a html element:
var howLongIsThis = myPlayer.duration();
var displayEl = document.getElementById("duration");
displayEl.innerHTML = howLongIsThis;
or if you want in in a form field:
displayEl.value = howLongIsThis;
Assuming you have a <div id="example"></div> somewhere in your HTML, you want to run JavaScript after the DOM has loaded which adds the value you want to that div. In jQuery (which you specified in your question you're using), this would simply be:
$('div#example').html(myPlayer.duration());
Here's a fiddle: http://jsfiddle.net/RyanJW/QjXKL/2/
Try this,
your HTML
<input type="text" id="logId" />
<div id="logId1"></div>
js Script
var howLongIsThis = myPlayer.duration();
document.getElementById("logId").value=howLongIsThis;
document.getElementById("logId1").innerHTML=howLongIsThis;
hope this will give you an idea to solve your problem

Regular Express issue - javascript

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>

Categories