前提・実現したいこと
ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
アプリ内にTwitterのタイムラインを表示したくてコード設置したのですが 反映されなくて困ってます!
該当のソースコード
<center><a class="twitter-timeline" href="https://twitter.com/fuusokunews?ref_src=twsrc%5Etfw">Tweets by fuusokunews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>
試したこと
HP制作するように通常通りに設置してもだめでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/16 14:36
2018/09/16 14:36
2018/09/18 06:04 編集
2018/09/18 09:18
2018/09/18 09:37
2018/09/18 10:22
回答1件
0
ons-pageなどの中には、javascriptで記述したコードが動かないため、表示されないようですね。
もしMonacaで表示しようとしたら、scriptタグが有効となる箇所に記述した上で、JavaScriptでその内容をページ内にコピーすれば、表示することは可能のようです。
具体的には、例えば、
- bodyタグの直下に
<div id="twitter"> <center><a class="twitter-timeline" href="https://twitter.com/fuusokunews?ref_src=twsrc%5Etfw">Tweets by fuusokunews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center> </div>
を追加しておく
- javascriptコードの中の
if (page.matches('#first-page')) {
の直後に
page.querySelector('.page__content').appendChild(document.querySelector('#twitter'));
を追加する
コード全体では、script部分
<script> ons.ready(function() { console.log("Onsen UI is ready!"); }); document.addEventListener('show', function(event) { var page = event.target; var titleElement = document.querySelector('#toolbar-title'); if (page.matches('#first-page')) { page.querySelector('.page__content').appendChild(document.querySelector('#twitter')); titleElement.innerHTML = 'My app - Page 1'; } else if (page.matches('#second-page')) { titleElement.innerHTML = 'My app - Page 2'; } }); </script>
bodyタグ部分
<body> <div id="twitter"> <center><a class="twitter-timeline" href="https://twitter.com/fuusokunews?ref_src=twsrc%5Etfw">Tweets by fuusokunews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center> </div> <ons-page> <ons-toolbar> <div class="center" id="toolbar-title"></div> </ons-toolbar> <ons-tabbar position="auto"> <ons-tab label="Tab 1" page="tab1.html" active> </ons-tab> <ons-tab label="Tab 2" page="tab2.html"> </ons-tab> </ons-tabbar> </ons-page> <ons-template id="tab1.html"> <ons-page id="first-page"> <p style="text-align: center;"> This is the first page. </p> </ons-page> </ons-template> <ons-template id="tab2.html"> <ons-page id="second-page"> <p style="text-align: center;"> This is the second page. </p> </ons-page> </ons-template> </body>
となります。
こんな感じでいかがでしょうか?
とはいえ、これは表示しているだけなので、更新などをしようとしたら、もう一工夫必要かと思います。
投稿2018/10/23 04:55
編集2018/10/23 04:57総合スコア376
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/23 05:29
2018/10/23 06:03 編集
2018/10/23 06:01 編集
2018/10/23 05:55
2018/10/26 04:40 編集
2018/10/28 03:53
2018/10/28 18:36
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。