I have a HTML template that I'm rendering using Django. I'm passing in all the necessary context variables — my_heading is the heading, my_html is the mark-safed html. I'd like to display my_html in the iframe.
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<p>{% my_heading %}</p>
<iframe name="iframe1" width="600" height="400" src="http://www.yahoo.com" frameborder="yes" scrolling="yes"></iframe>
</body>
</html>
Would you know how to do this? All the examples I've found show the iframe pointing to a URL. I'm god-horrible at HTML and JS. :|
Thanks
Michael Klocker does not answer your question, but the answer he has given is a better solution. You should rather do that.
But to answer you question: You can only pass a url to a IFrame, so if really want to use a IFrame, you need to set up second url+view in django to return my_html as the response. I.e. 2 http requests will happen. 1 for the page containing the IFrame, and 1 request for then contents of the IFrame.
If I understand you correctly, you just want to show the HTML content that you prepared dynamically with Python within the Django template, correct? If that is the case, you do not need an Iframe. Iframes are only necessary if you would like to integrate parts of a different URI (webpage) as a frame (section on your webpage) on your page. Here a sample:
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<p>{% my_heading %}</p>
<div id="content">{% my_html %}</div>
</body>
</html>
Addition to the above code, base on comment below. Sounds like you want to show an entire page with an Iframe and that this second page comes form another view/url on your box. Then use:
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<p>{% my_heading %}</p>
<iframe src="URL_TO_MY_2ND_VIEW_IN_DJANGO" width="100%" height="300"></iframe>
</body>
</html>
Iframe explanation on W3Schools
Iframe description on W3C Site
I used this hack to do it. The div is hidden and contains the HTML. The IFrame doesn't point to a location because I don't want any CORS issues. I then inject my HTML into it.
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<p>{% my_heading %}</p>
<iframe name="iframe2" id="iframe2" width="0" height="0" src="" style="border:0px; overflow-x:hidden;"></iframe>
<div id="page" style="display:none" >{{ my_html }}</div>
<script type="text/javascript">
function getWindow(iframe) {
return (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
}
getWindow(document.getElementById('iframe2')).document.open();
getWindow(document.getElementById('iframe2')).document.write(document.getElementById('page').innerHTML);
getWindow(document.getElementById('iframe2')).document.close();
document.getElementById('iframe2').style.height = (getWindow(document.getElementById('iframe2')).document.body.scrollHeight + 20) +"px";
document.getElementById('iframe2').style.width = (document.getElementById('iframe2').parentNode.offsetWidth) +"px";
</script>
</body>
</html>
Related
I am currently using flask and I aim to do the following:
When I click on a tab on my webpage constructed by HTML, I want it to display a list of data stored in mysql server.
I know how to pull the data from sql in Python (using mysql connector) and then 'input' the values individually, however, this would require me to create another webpage with the sole objective of displaying data from that particular tab - and then I'd have to create a new webpage altogether for another tab.
This seems really inefficient and was wondering if there is a way of displaying data from sql when pressing a tab without needing to navigate to another page.
Code
Python:
#app.route('/studentdb')
def sdb():
return render_template('studentdb.html')
HTML (studentdb.html)
<!DOCTYPE html>
<html lang="en">
<head>
<html lang="en">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/style_sdb.css')}}">
<title>Student Database</title>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openSubject(event,'bio')">Biology</button>
<button class="tablinks" onclick="openSubject(event, 'chem')">Chemistry</button>
<button class="tablinks" onclick="openSubject(event, 'phy')">Physics</button>
</div>
<div id="bio" class="tabcontent">
<h3>Biology</h3>
<p>Biology Students List</p>
</div>
<div id="chem" class="tabcontent">
<h3>Chemistry</h3>
<p>Chemistry Students List</p>
</div>
<div id="phy" class="tabcontent">
<h3>Physics</h3>
<p>Physics Students List</p>
</div>
<script src="static/js/tabs.js"></script>
</body>
</html>
There are also css and javascript code for the tabs that I have not included - I'm happy to post them if required.
I am trying to scrape a list of website on Shopee. Some example include dudesgadget and 2ubest. Each of these shopee shop have different design and way of constructing their web element and different domain as well. They looks like stand alone website but they are actually not.
So the main problem here is I am trying to scrape the product details. I will summarize some different structure:
2ubest
<html>
<body>
<div id="shopify-section-announcement-bar" id="shopify-section-announcement-bar">
<main class="wrapper main-content" role="main">
<div class="grid">
<div class="grid__item">
<div id="shopify-section-product-template" class="shopify-section">
<script id="ProductJson-product-template" type="application/json">
//Things I am looking for
</script>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
littleplayland
<html>
<body id="adjustable-ergonomic-laptop-stand" class="template-product">
<script>
//Things I am looking for
</script>
</body>
</html>
And few other, and I had discover a pattern between them.
The thing that I am looking for will for sure in <body>
The thing that I am looking for is within a <script>
The only thing that I not sure is the distance from <body> to <script>
My solution is:
def parse(self, response):
body = response.xpath("//body")
for script in body.xpath("//script/text()").extract():
#Manipulate the script with js2xml here
I am able to extract the littleplayland, dailysteals and many others which has very less distance from the <body> to <script>, but does not works for the 2ubest which has a lot of other html element in between to the thing I am looking for. Can I know are there solution that I can ignore all the html element in between and only look for the <script> tag?
I need a single solution that are generic and can work across all Shopee website if possible since all of them have the characteristic that I had mention above.
Which mean that the solution should not filter using <div> because every different website have different numbers of <div>
This is how to get the scripts in your HTML using Scrapy:
scriptTagSelector = scrapy.Selector(text=text, type="html")
theScripts = scriptTagSelector.xpath("//script/text()").extract()
for script in theScripts:
#Manipulate the script with js2xml here
print("------->A SCRIPT STARTS HERE<--------")
print(script)
print("------->A SCRIPT ENDS HERE<--------")
Here is an example with the HTML in your question (I added an extra script :) ):
import scrapy
text="""<html>
<body>
<div id="shopify-section-announcement-bar" id="shopify-section-announcement-bar">
<main class="wrapper main-content" role="main">
<div class="grid">
<div class="grid__item">
<div id="shopify-section-product-template" class="shopify-section">
<script id="ProductJson-product-template" type="application/json">
//Things I am looking for
</script>
</div>
<script id="script 2">I am another script</script>
</div>
</div>
</main>
</div>
</body>
</html>"""
scriptTagSelector = scrapy.Selector(text=text, type="html")
theScripts = scriptTagSelector.xpath("//script/text()").extract()
for script in theScripts:
#Manipulate the script with js2xml here
print("------->A SCRIPT STARTS HERE<--------")
print(script)
print("------->A SCRIPT ENDS HERE<--------")
Try this:
//body//script/text()
This is urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.login_page, name='login_page'),
]
my views.py like this
def login_page(request):
return render(request, 'mileage/login_page.html', {})
this is my html code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" >
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
</head>
<body bgcolor="#4599e8">
<div class="title"><span><h1>Test</h1></span></div>
<div class="home_password">
<div class="password"><input type="password" name="password" placeholder="Password"></div>
<div class="button"><button>OK</button></div>
</div>
</body>
</html>
And start server, but my localhost:8080/ shows only html text not page.
Using Chrome Developer Console, I checked element.
<html>
<head></head>
<body>
<pre style="word-wrap: break-word; white-space: pre-wrap;">
"
my html code here.
"
</pre>
</body>
</html>
I don't know how to solve it.
Who is inserting all your html code inside the pre tag is your browser because it probably receives a Content-type: text/plain header with the response and it thinks you want to see the html code instead of the rendered webpage.
Try making a test using:
render(request, 'mileage/login_page.html', {}, content_type='text/html')
If it works, set the DEFAULT_CONTENT_TYPE constant to 'text/html' in your settings.
DEFAULT_CONTENT_TYPE
Default: 'text/html'
Default content type to use for all HttpResponse objects, if a MIME
type isn’t manually specified. Used with DEFAULT_CHARSET to construct
the Content-Type header.
Probably an environment variable is messing you up with this, It's weird that it has a default 'text/plain' content type set.
I'm my django app I would like to load a static html page into a main template. This static html page is an email template. My goal is to edit this email in my main template. The email html page don't have a view in url.py. I don't use include in main template and I don't want to use iframe. The problem is that I would like to load ALL the html email tag (like
<html>
<head>
<body>
) but when I do the page's render this tag is deleted (or I don't see them in main template...). This is my code:
view.py
def my_view(request):
file_name = "/templates/path/emailtemplate.html"
htmlblock = render_to_string(file_name, {})
return render_to_response('main_template.html', {
'htmlblock': htmlblock,
},
context_instance = RequestContext(request))
main_template.html
<html>
<head>
....
<head>
<body>
<div id="content">
{{htmlblock}}
</div>
</body>
</html>
this is what I would like to have:
<html>
<head>
....
<head>
<body>
<div id="content">
<html>
<head>
....
</head>
<body>
...
</body>
</html>
</div>
</body>
</html>
Is this possible without iframe? Thanks a lot for your help.
EDIT
My goal is to have the
<html>
<head>
<body>
tag into
<div id="content">
where I load the email template.
My goal is to edit this email in my main template.
You can read the template into string by
with open('/templates/path/emailtemplate.html', 'r') as content_file:
content = content_file.read()
You can use the same as a value to an edit field and it will be visible as usual. This can be used as.
return render_to_response('main_template.html', {
'htmlblock': content,
}, context_instance = RequestContext(request))
You can further use the same in edit field as:
<textarea value={{htmlblock}}>
Or render the same normally in
<div id="content">{{htmlblock}}</div>
This is my first crack at Angular. I'm posting JSON data to an html page using Angular.js. I know I'm missing something but can't seem to get it working. Below is the html. I have a python script posting to the same URL below.
<!doctype html>
<html lang="en" ng-app id="ng-app">
<head>
<title>File Analysis</title>
<script src="js/angular.js"></script>
<script>
var myApp = angular.module('fileAnalysis', []);
myapp.controller('PostsCtrlAjax', function($scope, $http)
{
$http({method: 'POST', url: 'http://test.com'}).success(function(data)
{$scope.posts = data;}) // response data
});
</script>
</head>
<body>
<h1>You should begin to see new files being analyzed!</h1>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts" >
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<td>
{{post.filename}}
</td>
</div>
</body>
</html>