Iframe with another iframe - html

I want to extract result of checking code. Website display in that code. I marked it in source code.
<div id="ember332" class="ember-view backArrowContainer">
<div id="purchaseMeta">
<h2 class="flowStatus"> UŻYJ KODU PREPAID </h2>
<div class="gamertag">
<div class="title">
<script id="metamorph-2-start" type="text/x-placeholder">
***CODE STATUS WHICH I WANT TO EXTRACT***
<script id="metamorph-2-end" type="text/x-placeholder">
</div>
<div class="price"> Kod prepaid </div>
</div>
It is avaible when i go to this site: https://account.xbox.com/pl-PL/PaymentAndBilling/RedeemCode?token=W4HV8-6D6X3-3JVDJ-8PPG9-Q6BVR
I want to extract only CODE STATUS displayed when website will go to this adres. I think it can be avaible when i can use in HTML but i don't know how. Please help me with extract this status.

You can't extract anything from the inside of an iframe. There cannot be any interaction from the parent to the iframe. There can, therefore, be interaction between the iframe and the parent, but since you are not the owner of the iframe's webpage, this is not your case.
It's a security issue. People could get scammed if this wasn't this way. For example, designing a full-page iframe with a bank webpage and retrieving everything user types... Or designing a 1x1px iframe with a facebook page to see if your user is logged on fb and check all his/her personal information.
You can use a server-side language, such us PHP and get the HTML of that webpage using file_get_contents()

Related

Using pagination with lots of similar HTML elements in the same file?

So I'm making a web app to run a small CTF that I will be hosting within my school, and I have developed a webpage that will load up the problems, my example right now lays out the problems in a long row
Here's how that's done:
<body class="main-body">
<div class="body">
<section class="content">
<div class="container-asdf"> <!-- This is a grid, assume that this particular element is repeated several times with changes -->
<div class="item-a">Test Problem</div>
<div class="item-b">Category: Test, Problem</div>
<div class="item-c"><button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-info">Button</button></div>
</div>
</section>
</div>
</body>
(Full disclosure that this HTML is likely pretty bad, just working with what I know)
the div with class "container-asdf" is automatically generated for the amount of problems, assume it works perfectly and it generates say 50 problems, I only want 10 of them to appear on the page at a time and I want to separate them using pagination, without having to make a ton of different HTML pages, how exactly could I do this? I don't need code, just some concepts and guides of how I could. My first thought process was to put it in invisible containers and make it appear as you select different numbers, thus why I asked how to use pagination
In summary: I have a lot of elements(in the same HTML file) appearing on the page at once, I want to limit this and split it into pages without having to make multiple HTML files, I am using Flask/Jinja to generate said HTML file, if that helps.
Thanks for any help!
Not sure if this applies but have you considered using the easyPaginate jQuery plugin for the pagination? An example and setup is available here.

Building a document icon that changes its content with each page (HTML/CSS/Bootstrap)

Users can visit pages where they can download a pdf document. Each document has its own page. Each document also has a specific name, page number, and author. Next to the download button I want to have an image of a document that changes its content depending on the document.
Sort of like this:
Except I want the title to change depending upon which document page is being viewed. The back end for this is completed, however, the front-end is more problematic.
Currently, I have a structure like this
<div class="container">
<div class="col-md-6">
<div id="document">
<p>$document->title</p>
<p>$document->page_number</p>
<p>$document->author</p>
</div>
</div>
<div class="col-md-6">
<div id="download-button">
<button>Download</button>
</div>
</div>
This displays a document image which changes its content depending on the page, next to the download button. However, I am wondering if there is a better way to do this? Currently the document image changes width with the page and doesn't retain a 'document' shape.
Thanks,

Applying AddThis buttons

I want to add AddThis, social bookmarking service, to my site. I followed the instruction on the site. There is an option where you can select your own services and customize the order.
I selected facebook, twitter, google, linked in, pinterest and whatsapp.
As instructed, I added
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53353be15c66b7b4" async="async"></script>
inside the head tag just before closing.
Then, where I need the buttons to show, I added
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_preferred_6"></a>
</div>
The end result:
It shows a few buttons that I haven't selected.
I must be doing something wrong and spent the whole day looking into it. Can you help.
Not Seeing the Buttons You Expected? It’s Because Smart Layers are Personalized
One of the key features of our new Smart Layers is something you can’t
actually see. All the share buttons are personalized to each visitor.
This makes it much more likely that people will share your site.
-source: http://www.addthis.com/blog/2013/07/30/not-seeing-the-buttons-you-want/
So basically what it means is that if a particular user is know to use a particular social service more, only those buttons will be shown to that person. Filtering appears to be done at a low level.
Have a look at other similar services.
Your problem is that you are manually setting the icons on your page. Considering you are selecting your services via the addthis.com website, simply add the following div element to your page, in place of your current addthis code:
<div class="addthis_sharing_toolbox"></div>
That div will get filled automatically with the services you selected from addthis.com, trust me on this one I got this.
I am Elsa from the AddThis support team.
If you were using the default AddThis configuration it's using what we call Preferred Services. These are different for each individual based on their past sharing history and what services are most popular in our service. This is designed to make it easy for users to share to their preferred service and to increase sharing.
If you want to show up the dashboard configured sharing button in your website then Replace the below code
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_preferred_6"></a>
</div>
with the below inline HTML code of that tool.
<div class="addthis_sharing_toolbox"></div>

Twitter feed not showing up in Webpage

I am a beginner with developing websites. I ran into this problem. I would be really glad if I am helped with the same.
I want to incorporate twitter feed in my webpage. I got the script from twitter.com for displaying feeds by creating a widget. When I display just the twitter feed inmy HTML page it works. But when I try to include inside my div tag, it doesn't show up.
The Following is the code snippet
<div class="span3 right tc-sidebar">
<div id="right" class="widget-area" role="complementary">
<a class="twitter-timeline" href="https://twitter.com/xxx" data-widget-id="xxx">Tweets by #_Harish_vK</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
U tried every possible thing I can. Please help me out . Since I have can only use the CSS which are already available for my organization(policy), is there a way to do it without modifying those CSS?
I fixed this by making a separate page for twitter feed and including it in an iframe under the divs.
Thank you guys!

How to target html elements when logged into DNN

Silly question and I hope I just overlooked this. In Sitefinity, once you are logged in, there is a wrapping div which one can use to target certain html tags ONLY when you are logged in.
I am not seeing anything like this in DNN and was wondering if someone knows of a solution to this please?
What I would like, is something like this:
[div class="dnn-logged-in"]
[div class="my-content-wrapper"]
[div class="elements-i-would-like-to-show-or-hide]
Hide or show this if I am logged in or not
[/div]
[/div]
[/div]
Many thanks!
I'd say this is a fairly uncommon task because this type of logic is generally handled on the server side and not the client side. This is because you generally don't want to increase the client payload any more than you need to - and if the user isn't logged in - they'll never need this content. In addition there are obviously security implications if working with sensitive data - as the information is easily viewable in the underlying markup.
All disclaimers aside, If you do want to do this, I think the best solution would be to just make site work just like you're used to in Sitefinity. In DNN you would create a container that contains the appropriate logic. A container wraps each module, and within the container you have the opportunity to write any code (server or client) to make your container dynamic.
For this brute force example I modified the "Invisible.ascx" container that ships with the DarkKnight skin in DNN 6:
<%# Control language="C#" AutoEventWireup="false" Inherits="DotNetNuke.UI.Containers.Container" %>
<%
var isLoggedIn = HttpContext.Current.User.Identity.IsAuthenticated;
if (isLoggedIn)
{
%>
<div class="dnn-logged-in">
<% } %>
<div class="Invisible"><div id="ContentPane" runat="server"></div></div>
<% if (isLoggedIn) { %>
</div>
<% } %>
This will yield the following HTML when not authenticated:
<div class="DnnModule DnnModule-DNN_HTML DnnModule-364">
<a name="364"></a>
<div class="Invisible">
<div id="dnn_ctr364_ContentPane">
[Dynamic Content Here]
</div>
</div>
</div>
and this when you are authenticated:
<div class="DnnModule DnnModule-DNN_HTML DnnModule-364">
<a name="364"></a>
<div class="dnn-logged-in">
<div class="Invisible">
<div id="dnn_ctr364_ContentPane">
[Dynamic Content Here]
</div>
</div>
</div>
</div>
If you want this logic everywhere, I'd just enhance each of the containers that you're currently using with this type of logic.
You can use SkinObject to do so in dnn. Login skin object will help you showing a Login/ Logout OR Regiter, User Skin object will help you show the currently logged in user. You can use any style and div you want.
In DotNetNuke this is controlled by permissions, which can be assigned to pages or to individual modules (specific content). By default, new pages will have VIEW permissions for "All Users", and new content created on the page will inherit that permission.
To change this, select the settings for the specific content, un-check the "Inherit View Permissions from Page. This will enable the check-boxes for all the various roles. Then simply ensure that All Users is un-selected, and instead select "Registered Users". This will make the content visibleto any user who is logged into the site.
This is a super powerful permission model which actually controls the rendering, rather than just obscuring visibility.