I have
<div class="ap-content" id="office-addon">
<div class="ap-iframe-container iframe-init" id="office-addon__5e83ed1">
<iframe id="office-addon__5e83ed1">
<!-- As it appears in the dev console: -->
#document
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="addon"></div>
</body>
</html>
</iframe>
<div>
<div>
I want to access it with nightwatch like so:
browser
.waitForElementPresent('#office-addon', 20000);
.frame('#office-addon iframe')
.waitForElementPresent('#addon', 1000)
.end();
But it times out waiting for #addon, though #addon is in the browser. How do I have to write the frame() parameters? The iframe id changes with every page build.
The solution was like following:
browser.getAttribute('#office-addon iframe', 'id', id => {
browser
.frame(id.value)
...
});
It didn't work directly.
If you want to select it by id, you probably ought to try a starts with selector like:
.frame("iframe[id^='office-addon']")
If it's always the nth iframe you can index in
// select the first iframe
.frame(0)
// go back to the original html content
.frame()
Iframes are elements to display another page, and it will not render any html written inside of it unless your browser doesn't support iframes. So that div with the id #addon is never being rendered in the first place.
Related
I have an element that loads in an iframe that is contained in another element, something like this:
<polymer-element>
<iframe>
<html>
<body>
<polymer-element>
</polymer-element>
</body>
</html>
</iframe>
<polymer-element>
I need to access from the element inside to the outside of the iframe, I was trying with this.parentNode, but only reach the html tag. I tried also with core-signals but neither worked.
Hi I have a div question,
on my home page I have a menu its in a div. The body has another div. Can I put or somehow call a specific div content from another page into the div of the homepage body when I call for it from my menu. or how can I put the other page inside the body div with out using Iframes. For example:
<html>
<body>
<div>content from the another_page.html div.</div>
or
<div>another_page.html inside here</div>
</body>
Can this be done? Thank you in advance.
You can use jQuery for solving this.
Please refer to this for loading div from another page inside div:
Load content of a div on another page
And for loading another page inside div:
loading html page inside div
You have a number of ways to do this, as commented already, ajax is probably what is used in most cases. However it can also be done using PHP, jQuery, and an HTML object.
Link to similar question: here
You could try this and style it with css
<body>
<iframe src="page1.html">
</iframe>
<iframe src="page2.html">
</iframe>
</body>
I am including styles in normal way like this:
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
this styles has a lot of styles which destroy my main view, it applies to body element, is it possible to applay the style only to one particular div?
Put that <div> into a separate page and include bootstrap CSS only in that page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
</head>
<body>
<div>This is your DIV</div>
</body>
</html>
Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe, change (for example) this:
<div>This is your DIV</div>
To this:
<iframe src="url of the other page"></iframe>
Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Yes, you can do that by ID:
<div id="myDiv"></div>
and then the CSS would be:
#myDiv { ... }
and that will apply that style to anything named myDiv. You could also use classes:
<div class="someClass"></div>
and then the CSS would be:
.someClass { ... }
and that will apply that style to anything with that class attached.
Based on what you're describing, surrounding the generality of the CSS that's breaking the already defined CSS, you're going to want to get rid of those general element styles and use ID's because it sounds like you're trying to merge some CSS.
You try to remove all styles of body with javascript code, and after that, after you add a name/id to the body style in your correct css, set this as class attribute of your body. (js code too after the document is completely loaded)
Another (stupid) solution depends on what do you have in the css file. Do you can edit the /css/boostrap.css, simply replace all body word with ".body1" (fe => make a class from it)?
I'm working on a project and having some trouble with IE7.
I've got that has an iframe that takes up the whole page and loads another page. Cut down, it looks something like this:
<html>
<head>
<title>Corporate Directory</title>
</head>
<body scroll="no" style="margin: 0;">
<iframe id="corpdir" height="100%" width="100%" frameborder="0" src="http://fullpath.to/corporate/directory" name="parent_frame">
</body>
</html>
Going to http://fullpath.to/corporate/directory works great in IE7, and there are no problems with rendering at all. But when it is loaded in the iframe like above, there are elements which get pushed to the left. All of these elements have a "margin-left" defined, but it seems like it's getting ignored. Not all elements with margin-left are being pushed over, just a few. I can't see anything in common about them that I could imagine would do this.
(Please don't ask why I was pretty much forced to load our webapp in a full screen iframe. Just accept that's it's pretty enterprisey and move on. Thanks.)
Fixed it like this:
<html>
<head>
<title>Corporate Directory</title>
</head>
<frameset>
<frame src="http://fullpath.to/corporate/directory">
</frameset>
</html>
Didn't even realize there was no reason to be using an iframe there.
I have a vertical left menu in my asp.net page.
using jquery .load,i try to load other aspx page in the midlle div(content div)
depending on the link click.Like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx");
});
this solution doesn't work,i have followed the jquery doc.Do i should add some thing in mypage.aspx,all the examples i found i found googling don't work.
Can someone pls give me a working link or an example for that.
The best thing you can do (short of only responding with the requested content) is have a container in there, like this:
<div id="ContentDiv">
<div id="ContentInner">
</div>
</div>
This is to prevent multiple IDs in the page when doing the .load(). Since .load() takes a selector you'd then use that to get the content, like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx #ContentInner");
});
Now this loads only that inner <div> onto this page.
Some considerations to this approach you're taking:
Scripts/styles in the <head> won't be loaded
Be sure your <form> is inside that <div id="ContentInner">
You're embedding a full HTML document into a <div> element. The result will look like this:
<html>
<head>
.
.
</head>
<body>
<div>
<html>
<head>
.
.
</head>
<body>
.
.
</body>
<html>
</div>
.
.
</body>
</html>
The browser won't be able to do anything with that. Try loading your page in an <iframe> element instead of a<div>.