I'm buildin a webserver for an embedded system.
The main page must embed another html file, whose address in created with javascript.
the javascript is the following
<body class="mainPage" onload="getTerminalUrl()"> <br>
<script>
function getTerminalUrl() {
var terminalUrl = "embedded.html"
document.getElementById("embeddedTerm").setAttribute("src", terminalUrl);
document.getElementById("linkedTerm").setAttribute("action", terminalUrl);
}
</script>
and it creates a link to embedded.html (just for this example), in two spots
a button:
<form id="linkedTerm" action="">
and an embedded form
<embed id="embeddedTerm" src="" style="width: 100%;">
The embedded page is like this
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>Heading</h1>
<p>paragraph</p>
</body>
</html>
What happens is that, by using Firefox, i get the expected result
With Chrome i get the embedded page only when i open the inspector or resize the window
Do i Have to force a redraw or something to have the embedded page displayed consistently?
If instead of the Javascript i hardcode the URL everything works.
Thanks,
Marco
#CBroe posted the correct answer.
using iframe
<iframe id="embeddedTerm" src="" style="width: 100%;">
as well as forcing a refresh with
var element = document.getElementById("embeddedTerm");
element.style.display = 'none';
element.style.display = 'block';
Thanks a lot
Related
I am making a single page application using injection function :
<html>
<body>
link1
link2
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>
<script>
function injector(url) {
window.parent.document.getElementById("iframe").src = url;
}
</script>
There are 2 urls in this simple example. I can save the one that has been clicked on local storage. But:
how do I explain in JavaScript (When the page is refreshed, use the last used url automatically)
How to deal with going back to a previous page (a previous url). Is there a better way to deal with navigation in single page application using JS?
here, whenever you click on link it will load url in iframe and when you do fresh it will load from localstorage itself.
<html>
<body>
link1
link2
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>
<script>
var iframe = document.querySelector('iframe#iframe');
iframe.src=localStorage.getItem('url');
function injector(url) {
iframe.src = url;
localStorage.setItem('url',url);
}
</script>
I have a web page that contain an iframe:
<div id="confIMG" style="display:block;">
<iframe id="ifrmy" src="http://www.example.com" style="margin:0;padding:0;border:0;overflow:hidden;height:200px;width:90%;'" scrolling="no">
</iframe>
#document
<!DOCTYPE html>
<html>
<head>....</head>
<body>....</body>
</html>
</div>
for getting all of html source, i used this javascript:
javascript:HTMLOUT.processHTML(document.documentElement.outerHTML);
But, when the listener is invoked, i just see:
<div id="confIMG" style="display:block;">
<iframe id="ifrmy" src="http://www.example.com" style="margin:0;padding:0;border:0;overflow:hidden;height:200px;width:90%;'" scrolling="no">
</iframe>
</div>
the issue is that all iframe document is missed. How can i get them all?
I also tried to get the page using JSOUP. in that case, i'm only get:
<div id="confIMG" style="display:block;"></div>
PS: i tried to check using Chrome browser. I can only see source code when i use developer options / developers tools into tab elements.
JSoup won't fetch automatically the iframe content if you don't ask it to do so.
When you have first loaded the page, find the iframe then fetch it with Jsoup.
Document doc=...
Element ifrmy = doc.select("#ifrmy").first();
if (ifrmy!=null) {
Document iframeContent = Jsoup.connect(ifrmy.attr("src")).get();
// ...
}
I have an area control which is having href="http://google.com" I want to open this URL as pop in frame.
Area code is as follows:
<area tabindex="61" alt="" id="ar1" title="" href="http://google.com"
style="text-decoration:none;" target="_top" shape="poly"
coords="123,169,123,237,146,237,146,169"></area>
I am not generating any area control. The area control is being generated from SSRS report and this SSRS report is not assigning any id for area.
I have googled a lot but does not get success so I have posted it here.
SSRS is generating report like the below image.
.
SSRS is generating dynamic URL and each bar having different URL and it may be any server name in the globe (e.g. 1 bar has URL of google another has URL of apple)
you can use like this... I am giving a theme how can you achieve this...
<html>
<head>
<title>Test IFrame SRC by Javascript </title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
$("#frame").attr("src", "http://www.dotnetschools.com/");
})
});
</script>
</head>
<body>
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300"></iframe>
</div>
<button id="button">Load</button>
</body>
</html>
As you can see on above example on button click, I am opening a url inside a iframe. you can just do that.
Thanks
I have removed target="_top" and it start working for me.
This application having too many Frame, frameset & iframe nesting. somewhere it was causing issue due to target="_top".
I've been struggling with this one for a few hours now.
I am trying to attach click listeners to elements within an iframe with no src attribute. The entire page is basically inside that bad boy.
When I use "inspect element", the body of iframe looks empty (dunno if that has to do with the fact it has no src attribute.
<iframe id="CoverIframe" name="CoverIframe">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
When I enter the ID of the iframe in the console, it simply returns null, which prevents me from checking the elements it contains via contents().find() or anything else for that matter. I can only see its content (and by extension the elements on the page) by showing the source code (right click>see source).
Any thoughts on this? Is it because of the absence of src attribute? Any way I can get around it?
Thanks,
Alexis
As you noticed, you can't just set the innerDocument of an iframe like that.
However, you can use its (html-5 only)srcDoc attribute to set it,
<iframe id="CoverIframe" name="CoverIframe" srcdoc="
<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
or use a data:text/html;charset=utf-8,<html><head></head><body>hello</body></html>".
<iframe id="CoverIframe" name="CoverIframe" src="data:text/html;charset=utf-8,<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
But for the later, you will soon need to encodeURI() your page.
So the best is probably using javascript :
<script>
var yourHTML = "<html><head></head><body>hello</body></html>";
function loadFrame(e){e.contentDocument.write(yourHTML)};
</script>
<iframe id="CoverIframe" name="CoverIframe" onload="loadFrame(this)">
► Show code fiddle
I am trying to get the first paragraph from the website below and display it in an iframe.
Can you correct my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
$(iframe).contents().find("<p>").html();
</script>
</head>
<body>
<iframe name="iframe" id="iframe" src="https://www.baronaonlinepoker.com/blog" scrolling="yes" width="180" height="135">
</iframe>
</body>
</html>
You'd be better to use a DIV and use XMLHTTPRequest to set the innerHTML
If the browser loads a page from x.com, that page can have a frame whose source is y.com, but the x.com code will not have access to the y.com DOM. This is a cross-domain issue. You can read more here: http://en.wikipedia.org/wiki/Same-origin_policy
Please see my answer here: https://stackoverflow.com/a/19100553/98706
because I think your going about achieving something the wrong way.