Here is the initial HTML, it is fairly small. It's only meant to be the loading screen.
<html>
<head>
<title>Simple Hello World</title>
<link href="rapid-ui.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="rapid-ui.js"></script>
</head>
<body>
This is the body of the page.
</body>
</html>
The "rapid-ui.js" will generate an HTML string, this will be a full document - including DOCTYPE, head, meta, scripts, css, etc. After it is done generating the HTML it should then display that HTML on top of the page in an iframe in the same way as if the "src" of that iframe was set to a URL that generated that same HTML string.
I tried this:
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0"></iframe>');
iframe[0].src = 'data:text/html;charset=utf-8,' + encodeURI(html);
iframe.appendTo('body');
}
It doesn't seem CSS or scripts are executed properly.
This doesn't work either
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0"></iframe>');
iframe[0].innerHTML = html;
iframe.appendTo('body');
}
You cannot just insert data into an iframe before it is appended to the dom. Try this
function showHTML(html) {
$('<iframe id="display" frameborder="0">').appendTo('body')
.contents().find('body').append(html);
}
Here is another way if you need to edit the head.
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0">').appendTo('body');
var doc = iframe[0].contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
I found from here: Creating an iframe with given HTML dynamically a possible solution
function showHTML(html) {
var iframe = $('<iframe id="display" frameborder="0"></iframe>').appendTo('body');
var doc = iframe[0].contentWindow.document;
doc.open();
doc.write(html);
doc.close();
}
This solution seems to work.
Try this:
function showHTML(html) {
var iframe = '<iframe id="display" frameborder="0"></iframe>';
$("body").append(iframe).append(html);
}
append will append within the element
If you need to edit the src of the iframe instead... do this:
function showHTML(html) {
var iframe = '<iframe id="display" frameborder="0"></iframe>';
$("body").append(iframe).attr("src", "data:text/html;charset=utf-8," + encodeURI(html));
}
or this:
function showHTML(html) {
var fSrc = "data:text/html;charset=utf-8," + encodeURI(html);
var iframe = '<iframe id="display" src="\" + fSrc + "\" frameborder="0"></iframe>';
$("body").append(iframe);
}
Related
I want to have JavaScript to get a user's URL and return the source code of the website. I want to have this to essentially make an iframe, but with the actual code.
E.g. :
let userUrl = prompt("What website do you want displayed?","e.g. https://www.google.com");
function getSource(url){
//some code
return pageSource;
}
document.body.innerHtml=getSource(userUrl);
I tried to scrape a view page source website and turn it into an API that I could inject into JavaScript, but I had no luck.
<html>
<head><meta charset="us-ascii">
<title></title>
<script>
let userUrl = prompt("What website do you want displayed?","e.g.
https://www.google.com");
if (userUrl){
var srcFrame=""; //complete page code to inject into your iframe or return
var fetchMe = "https://example.com?q=" + userUrl;
fetch(fetchMe).then((response) => response.text()).then((text) => {
srcFrame = text;
//if injecting into iframe
myFrame.document.open();
myFrame.document.write(srcFrame);
myFrame.document.close();
// USE THE FOLLOWING TO ADD THE ORIGINAL URL AS THE baseURI SO RELATIVE
//LINKS & SCRIPTS WILL WORK AND ACCESS THE ORIGINAL SOURCE AND NOT YOUR
//SERVER
var addOrigBase= document.createElement('base');
addOrigBase.setAttribute('href',userUrl);
document.getElementById("myFrame").contentDocument.head.appendChild(addOrigBase);
});
};
</script>
</head>
<body>
<iframe onload="myFrame.frameElement.height =
(myFrame.frameElement.contentDocument.body.clientHeight)+10" frameborder=""
height="25px" id="myFrame" name="myFrame" scrolling="no" src="about:blank"
width="100%"></iframe>
</body>
</html>
I have a string which comes from external source. Now i want to integrate this script and style tag in my application and execute scipt.
const styleScriptText = '<style type="text/css">#checkoutmodal .checkoutmodal-box{background:#FFF !important}</style><script src="https://someurl/lib/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() { console.log("test")});</script>'
To achieve this i created a dynamic html and appended it in iframe
const html = `<html>
<head>
${styleScriptText}
</head>
<body>
</body>
</html>`;
const iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
Now the problem is when i inspect this iframe i am not getting script and style tags please find attached
I am not sure what mistake i am doing any help is highly appreciated.
Edit: Alternative to this is there any way we can styleScriptText in application and execute script functions ?
You are inserting your html into the src attribute of the iframe instead of the iframe content
const styleScriptText = '<style type="text/css">#checkoutmodal .checkoutmodal-box{background:#FFF !important}</style><script src="https://someurl/lib/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() { console.log("test")});</script>'
Define html and set the sourxe
const html = `<html>
<head>
${styleScriptText}
</head>
<body>
</body>
</html>`;
const iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
Set the iframe content
var doc = iframe.contentWindow.document;
doc.open();
doc.write(html);
doc.close();
document.body.appendChild(iframe);
I need to append the iframeFooter to the actual iframe. I tried the following:
var media = document.getElementById('media');
var foot = document.getElementById('iframeFooter');
media.appendChild(foot);
console.log(media);
and also:
$(function(){
var media = $("#media").contents().find('body');
media.append($('#iframeFooter'));
$(function(){
var media = $("#media").contents().find('body');
media.append($('#iframeFooter'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe id='media' src="https://www.google.com/maps/d/embed?mid=1EhOE6w1_iHeWWpE_Y52YQjVKf3jxXOV6" ></iframe>
<div id="iframeFooter"><span style="background-color:grey">click pin for details of gas leak</span></div>
In short, I want to pass the site url of the user which uses the following code:
<script type='text/javascript'>
var url = document.location.href;
</script>
<iframe src="http://localhost/page.php?site=242333&u=" + url + " scrolling="no" frameborder="no" style="border:none; overflow:hidden;" onload="this.width = this.contentDocument.body.scrollWidth; this.height = this.contentDocument.body.scrollHeight" />
The problem in the following part:
src="http://localhost/page.php?site=242333&u= [" + url + "]
How can I concatenate the JavaScript variable with the url?
you cannot use javascript variable in html code. Just fill the src attr of tag with javascript like for example:
<iframe id="frame" src=""> ... //rest of html
<script type='text/javascript'>
var url = document.location.href;
document.getElementById("frame").src = "http://localhost/page.php?site=242333&u=" + url + ... //rest of src
</script>
HTML
<iframe src="http://localhost/page.php?site=242333&u=" id="iframe"></iframe>
JavaScript (jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript'>
var url = document.location.href, getIframe = $("#iframe").attr("src");
$("#iframe").attr("src", getIframe + encodeURIComponent(url));
</script>
You can't use a JavaScript variable in your HTML markup like you're trying to do. It just doesn't work. What you can do is set the frame's source in a script that comes right after the iframe in your HTML. So, something like:
<iframe scrolling="no" frameborder="no" style="border:none; overflow:hidden;" onload="this.width = this.contentDocument.body.scrollWidth; this.height = this.contentDocument.body.scrollHeight" id="pageFrame"/>
<script type='text/javascript'>
window.addEventListener('load', function() {
var url = document.location.href;
document.getElementById("pageFrame").src =
"http://localhost/page.php?site=242333&u=" + encodeURIComponent(url);
}
</script>
Note that I added an ID to your iframe so that it could be accessed through document.getElementById() Also, I used the JavaScript encodeURIComponent so that the string in your url variable would be safely encoded for your source URL. This will require a corresponding decode on the server side, and since it looks like you're using PHP, that would be done using the urldecode() function.
iframe is loaded dynamically into container div inside function.
With cc.text(content); I try to update #code content.
I check changed text in runtime, it's updated but on screen value remains the same.
I am not a javascript pro, so any comments are welcome:
function ShowEditor(content) {
var url = "XmlEditor/Editor.htm";
slHost.css('width', '0%');
jobPlanContainer.css('display', 'block');
frame = $('<iframe id="' + jobPlanIFrameID + '" src="' + url + '" class="frame" frameborder="0" />');
frame.appendTo(jobPlanIFrameContainer);
$(frame).load(function () {
var ifr = frame[0];
var doc = ifr.contentDocument || ifr.contentWindow.document;
var jdoc = $(doc);
var cc = jdoc.contents().find("#code");
// var tst = cc.text();
// alert(tst);
cc.text(content);
});
}
I get the text in commented code, but fail to update #code content.
iframe holds the following html where I omit details inside head and script:
<!doctype html>
<html>
<head></head>
<body>
<form>
<textarea id="code" name="code">some texts</textarea>
</form>
</body>
</html>
Your XML editor doesn't read more than once what's in the textarea.
A simple solution would be to generate in javascript the iframe content with the desired textarea content instead of loading it and then try to change the textarea content.
In fact (depending on the capacities of your XML Editor), you probably can do that directly in a generated text area instead of using a whole iframe to do it.