*Im trying to Open multiple links in same Iframe, as well as changing the divsstyle.visibility(Visibility is working for me) but adding window.open I get nothing. I have the original address in a div id="testing" name="wordp" *
<head>
<script type="text/javascript">
function wordpaboutme() {
var showme2 = document.getElementById("testing");
showme2.style.visibility = "visible";
var changeme = document.getElementById("testing");
changeme.window.open.('http://mysite.com/main/about-me/','wordp');
}
</script>
<body>
<div id="testing" name="wordp" class="bloger" ><iframe src="http://mysite.com/main/" frameborder="0" scrolling="no" width="990" height="800" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>
window.open opens a popup window. It doesn't change what's in an iframe.
To open a different page in an iframe, consider changing the "src" attribute of the iframe with JQuery
Also, as Collin Grady has mentioned in the comment, it is an even simpler method to specify the iframe id in the "target" attribute of the link, to do the job.
Related
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
I must check the change of a tag in an iframe in another webpage (with the same domain). I have this index.html:
<html>
<body>
<iframe id="open_app" src="/sign.php" width="800" height="600" frameBorder="0" scrolling="no" ></iframe>
</body>
...
and this is the tag in sign.php that I want check for change:
<div id="status"></div>
Now, I have always used the MutationObserver for check the change of a tag in a webpage but I now I can not do the same to test the iframe tag with the id status. I've already seen all the related discussions on Stackoverflow but nothing works. What is the best way to verify the change of the iframe tag with the MutationObserver? Thanks.
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'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 want to change the URL in browser based on the iframe navigation like:
**[URL at navigator: http://localhost/]**
<html>
<body>
<iframe src="http://localhost/?loadiframe=true">
<!-- this is at the code retrieved by the iframe -->
<a id="mypage" href="http://localhost/mypage/?loadiframe=true">Navi</a>
</iframe>
</body>
</html>
When the user clicks the #mypage link the URL in the browser will be:
http://localhost/mypage/
Not matters that the src of the iframe be the same always.
¿Is that possible?
Maybe using ajax.........??
Take a look at: Html5 history api
If you set the target attribute of the link to _parent, the address should open in the parent window:
<a id="mypage" href="http://localhost/mypage/?loadiframe=true" target="_parent">Navi</a>